jquery - JQuery-顺时针和逆时针旋转一个div

Question

我找到了有关如何使用 JQuery 旋转 div 的链接。

在 jQuery 中旋转一个 Div 元素以及更多文章。

代码如下

    $(function() {
            var $elie = $("#wheel");
            rotate(0);
            function rotate(degree) {

                // For webkit browsers: e.g. Chrome
                $elie.css({
                    WebkitTransform : 'rotate(' + degree + 'deg)'
                });
                // For Mozilla browser: e.g. Firefox
                $elie.css({
                    '-moz-transform' : 'rotate(' + degree + 'deg)'
                });
                $elie.css({
                    '-ms-transform' : 'rotate(' + degree + 'deg)'
                });

                // Animate rotation with a recursive call
                setTimeout(function() {
                    rotate(++degree);
                }, 5);
            }

        });

有人可以帮我将此代码扩展为像方向盘一样顺时针和逆时针随机旋转元素

Answer 1

你可以扩展 jQuery.animate() 来创建像这样的 jsfiddle

$.fx.step['degree']=function(fx){
if(! fx.deg){
    fx.deg=0;
    if($(fx.elem).data("degree")){
        fx.deg=$(fx.elem).data("degree")
    }   
}
$(fx.elem).css({"WebkitTransform":"rotate("+Math.floor(fx.deg+(fx.end*fx.pos))+"deg)","-moz-transform":"rotate("+Math.floor(fx.deg+(fx.end*fx.pos))+"deg)","-ms-transform":"rotate("+Math.floor(fx.deg+(fx.end*fx.pos))+"deg)"});
$(fx.elem).data("degree",Math.floor(fx.deg+(fx.end*fx.pos)));    }

Answer 2

您只需更改 setTimeout 内的代码即可使增量/减量随机

 // Animate rotation with a recursive call
                setTimeout(function() {
                    increment= Math.random() < 0.5 ? -1 : 1;
                    degree+=increment;
                    rotate(degree);
                }, 5);

或者

increment = Math.floor(Math.random()*3)-1;

对于 -1,0,1 运动