Question

我想完全像小提琴那样旋转一个对象：http://jsfiddle.net/nqC6T/ 但是，我的项目中没有可用的JQuery库。

 var angle = 0;
    $(document).ready(function () {
        $('#rotate').click(function () {
            angle += 90;
            $('#div1').animate({ rotate: angle }, {
                step: function (now, fx) {
                    $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
                    $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
                    $(this).css('transform', 'rotate(' + now + 'deg)');
                },
                duration: 3000
            }, 'linear');
        });
    });

这可以用普通的JavaScript吗？

谢谢！

Answer 1

基于Javascript的简单解决方案如下：

var obj = document.getElementById("div1");
var total = 100;
var current = 0;

setInterval(function(){ 

 if (current < total) {
      current += 1;
        obj.style.transform = 'rotate('+current+'deg)';
 }
}, 1);

这只是一个例子。你绝对可以进一步改进这个代码。正如Mohammad所提到的，你也可以使用基于CSS3的动画。

Answer 2

您可以添加速度＆＃39;和＆＃39;初始旋转位置＆＃39;你的元素希望旋转，只需使用一个闭合来自动返回给定的旋转增加/减少率：

var division=document.getElementById("rotdiv");

function rotElem(startpos,rate){
  return function(mult){ 
  return division.style="transform:rotate("+ startpos+ mult*rate++ +"deg)";};
}
var rotelem = rotElem(0,1);
var atspeedof = setInterval(rotelem.bind(null),1000,10);

rotElem（0,1）您可以定义可选的起始位置＆＃39; 0＆＃39;开始旋转前的元素和自我增加的单位＆＃39;关闭的变化回报。

setInterval（rotelem.bind（null），1000,10）您调用setInterval以在每秒运行闭包并传递值＆＃39; 10＆＃39;作为速率速度的乘数。在setInterval时间之后更改最右边的参数，增加或减少旋转。

＆＃13;

var division = document.getElementById("rotdiv");

function rotElem(startpos, rate) {
  return function(mult) {
    return division.style = "transform:rotate(" + startpos + mult * rate++ + "deg)";
  };

}
var rotelem = rotElem(0, 1);
var atspeedof = setInterval(rotelem.bind(null), 500, 10);

＆＃13;

#rotdiv {
  position: relative;
  margin: auto;
  top: 50px;
  width: 80px;
  height: 80px;
  background-color: gray;
}

＆＃13;

<div id='rotdiv'>
</div>

＆＃13;

纯JavaScript转动

2 个答案: