1

回転中に画像の円形アニメーションを作成しています。次の 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);
});

フィドル

タッチ イベントについては、同様のことができます。タッチ イベントの詳細については、この回答をご覧ください: iPad の Safari で jQuery を使用してタッチ イベントを認識する方法は? 出来ますか？

ただし、アイコンの円の上にいるときだけアニメーションを実行したい場合は、別のことをする必要があります。この場合、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 に答える