JQuery 旋转 - 在镶边中重新启动旋转

JQuery rotate - re-initiate rotation in chrome

本文关键字：旋转 重新启动 JQuery      更新时间：2023-09-26

我有一个圆形图像，它在页面加载时旋转，并在鼠标悬停/悬停时停止和开始。 圆圈也是可拖动的，以便我可以手动旋转它。 这一切都在Mozilla中运行良好，但在Chrome中效果不佳。 问题是它不会在鼠标退出时重新启动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>

一种更简单的方法是将 rotateBy 方法添加到 GreenSock 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？

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

这应该完全一样吗？

相关文章：