我在旋转时创建图像的圆形动画。我从以下网址获取帮助:
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>
最佳答案
目前尚不清楚何时开始/停止动画-最简单的方法是给周围的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
或者,定义一个图像贴图来控制活动区域(您要在其中运行动画)并将处理程序附加到该区域。
关于javascript - 如何使用Mouseover/TouchStart/Mouseend/touchend使用JQUERY创建圆形动画图像?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19353596/