javascript - jQuery Rotate-重新启动Chrome中的旋转

我有一个圆形图像，该图像在页面加载时旋转，在鼠标悬停/移出时停止并开始。该圆也是可拖动的，因此我可以手动旋转它。这一切在Mozilla中都可以正常运行，但在Chrome中却不能很好地运行。问题在于它不会在mouseout上重新启动rotateCircle();。有人可以帮忙找出原因吗？我为此使用jQueryRotate和Greensock Draggable。


    
    
    

$(function() {

    var angle = 0;
    var int;
    rotateCircle();

    function rotateCircle() {
        int = setInterval(function() {
            angle += 3;
            $("#circle").rotate(angle);
        }, 100);
    }

    $("#circle").mouseover(function() {
        clearInterval(int);
        Draggable.create("#circle", {type:"rotation",throwProps:true});
    }).mouseout(function() {
       rotateCircle();
    });



});


</script>

最佳答案

一种更简单的方法是向GreenSock Draggable类添加rotateBy方法。

这是更新的Draggable类：
https://raw.githubusercontent.com/furqanZafar/GreenSock-JS/master/src/uncompressed/utils/Draggable.js

我只向Draggable.js添加了以下方法：

this.rotateBy = function(amount) {
    self.rotation += amount;
    self.x = self.rotation;
    dirty = true;
    render();
}

这是使用新的Draggable类在chrome和ff上均可使用的jsfiddle：http://jsfiddle.net/58rauhsL/

$(function() {

    var draggable = Draggable.create("#circle", {type:"rotation",throwProps:true}),
        interval;

    function rotateCircle() {
        interval = setInterval(function() {
            draggable[0].rotateBy(3);
        }, 100);
    }

    rotateCircle();

    $("#circle").mouseover(function() {
        clearInterval(interval);
    }).mouseout(function() {
        rotateCircle();
    });

});

关于javascript - jQuery Rotate-重新启动Chrome中的旋转，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27254810/