Question

我有一个在页面加载时旋转的圆形图像，并在鼠标悬停/停止时停止和启动。圆圈也是可拖动的，这样我就可以手动旋转它。这一切在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>

Answer 1

更简单的方法是将rotateBy方法添加到GreenSock Draggable类。

这是更新的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();
}

这是适用于chrome和amp;的jsfiddle ff使用新的Draggable类：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();
    });

});

Answer 2

我不太明白为什么需要使用Javascript？

http://jsfiddle.net/nmmkLpqo/（仅适用于chrome，为FX等添加供应商前缀。）

img {
    border-radius: 50%;
    -webkit-animation: rotation 5s linear infinite;
}
img:hover {
    -webkit-animation-play-state: paused;
}
@-webkit-keyframes rotation {
  from {
      -webkit-transform: rotate(0deg);
  }

  to {
      -webkit-transform: rotate(360deg);
  }
}

这应该完全一样吗？

JQuery旋转 - 重新启动chrome中的旋转

2 个答案: