Question

我在玩耍时创建图像的圆形动画。我从这个网址获取帮助： How to create circular animation with different objects using 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>

Answer 1

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

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

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

Fiddle

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

但是，如果您只想在动画图标圈时运行动画，则必须执行其他操作。在这种情况下，您将使用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

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

如何使用Mouseover / TouchStart / Mouseend / touchend使用JQUERY创建圆形动画图像？

1 个答案: