1

我在 roatating 时创建图像的圆形动画。我从这个 url 获得帮助： 如何使用 jQuery 创建具有不同对象的圆形动画？. 但是我可以使用开始和停止按钮旋转。现在我需要在用户鼠标循环时旋转图像并在鼠标结束时停止？可能吗 ？

这是小提琴 http://jsfiddle.net/IrvinDominin/Krukd/1/

<button id='start'>start</button>
<button id='stop'>stop</button>
<div>
    <img src="https://dl.dropbox.com/s/66ip1iz8cm3wf2l/dial.png" style="position:absolute;top:=;left:;" id="dial1"></img>
    <img src="https://dl.dropbox.com/s/siqq3e8kdaefqn8/icon_0.png" style="position:absolute;top:60px;left:190px;" id="dial2"></img>
    <img src="https://dl.dropbox.com/s/zikxwpakha2ei1v/icon_1.png" style="position:absolute;top:100px;left:100px;" id="dial3"></img>
    <img src="https://dl.dropbox.com/s/dn5n76r6yr1tzpd/icon_2.png" style="position:absolute;top:180px;left:70px;" id="dial4"></img>
    <img src="https://dl.dropbox.com/s/vu9uckyoo7k8wcc/icon_3.png" style="position:absolute;top:270px;left:70px;" id="1"></img>
    <img src="https://dl.dropbox.com/s/lnb9h4hazcd619u/icon_4.png" style="position:absolute;top:370px;left:110px;" id="dial5"></img>
    <img src="https://dl.dropbox.com/s/pt0q3zbdxt3843d/icon_5.png" style="position:absolute;top:420px;left:230px;" id="dial6"></img>
    <img src="https://dl.dropbox.com/s/j9ybktafm0v08ff/icon_6.png" style="position:absolute;top:350px;left:340px;" id="dial7"></img>
    <img src="https://dl.dropbox.com/s/nuh0njoeczd94gm/icon_7.png" style="position:absolute;top:250px;left:390px;" id="dial8"></img>
    <div>
4

1 回答 1

0

不清楚何时要开始/停止动画 - 最简单的方法是给周围div一个 id（container例如）并设置它的大小。然后将鼠标事件绑定到那个。由于您已经拥有涵盖整个事物的图像，因此您可以使用它：

$("#dial1").mouseenter(function () {
    timer = setInterval(animate, 20);
});

$("#dial1").mouseleave(function () {
    clearInterval(timer);
});

小提琴

对于触摸事件，您可以执行类似操作，请查看此答案以了解有关触摸事件的更多信息：How to identify touch events using jQuery in Safari for iPad? 可能吗？

但是，如果您只希望动画在您越过图标圈时运行，则必须执行其他操作。在这种情况下，您将使用该mouseover事件并调用执行以下操作的函数（伪代码）

Get current pointer postion, calculate distance from center of the circle
IF (pointer distance > circle radius)
    IF (animation is running) THEN stop animation
ELSE 
    IF (animation is not running) THEN start animation

或者定义一个图像映射来控制活动区域（您希望动画运行的位置）并将处理程序附加到该区域。

于 2013-10-14T06:22:09.087 回答