0

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);
            }

        });

誰かがこのコードをハンドルのように時計回りと反時計回りにランダムに要素を回転させるように拡張するのを手伝ってくれませんか

4

2 に答える 2

4

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)));    }
于 2013-05-09T15:39:27.287 に答える
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 の動き

于 2013-05-09T15:03:15.147 に答える