用表单输入和滑块实现对象的转动/旋转
P粉007288593
P粉007288593 2023-08-16 16:16:28
0
1
431

我有一个名为#person的对象,我需要用滑块的输入将其从-180度旋转到180度。我已经使滑块与输入框同步,以显示当前角度值,并尝试编写了一个函数,但它没有起作用。我正在尝试使用style.transform。在项目中使用了Bootstrap和jQueryUI,如果能使用这两个框架而不是标准的JavaScript来解决问题,也会有所帮助。

HTML  
Javascript function rotatePerson() { const person = document.getElementById("person"); var angle = document.getElementById("thetaRange"); person.style.transform = "rotate(angle deg)" }

P粉007288593
P粉007288593

全部回复 (1)
P粉882357979

您提供的代码片段几乎正确,但是在JavaScript代码的最后一行中存在一些问题。以下是已更正的版本及其解释:

function rotatePerson() { const person = document.getElementById("person"); var angle = document.getElementById("thetaRange").value; // 获取角度的值 person.style.transform = "rotate(" + angle + "deg)"; // 将角度变量连接到transform属性中 }

解释:

1.rotatePerson函数使用getElementById选择了具有 ID 为 "person" 的元素,并将其赋值给变量person

2.接下来,它使用getElementById和访问value属性从具有 ID 为 "thetaRange" 的元素中获取角度的值。该值表示滑块上当前选择的角度。

3.最后,代码将person元素的style.transform属性设置为rotate(" + angle + "deg)。这将动态地将旋转应用于person元素,使用从滑块获取的度数值angle

通过在滑块值更改时调用rotatePerson函数,人物元素将根据所选的角度进行旋转。

    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责声明 Sitemap
    PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!