用JackHammer鼠標動畫圖像

所以我在這裏工作一個小問題。當你用鼠標移動圖像時，我設法讓動畫播放，但它一直在經歷它。我總共有10個圖像，因此，將鼠標放在圖像上的時間越長，顯示的圖像就越多。如果您移除鼠標，則會停在所停留的任何圖像上。我只需要它去的最後一個圖像是圖像10和停在那裏，甚至重置回圖像0用JackHammer鼠標動畫圖像

<script type="text/javascript"> 

var curJackhammer = 0; 
var begin; 

function bounce() { 

document.getElementsByTagName('img')[0].src = 'jackhammer' + curJackhammer + '.gif'; 
curJackhammer ++; 

if (curJackhammer > 10) { 
    curjackhammer = 0; 
} 

} // end of bounce funntion 

function startBouncing() { 
if (begin) { 
    clearInterval (begin); 
} // end of if statement 
begin = setInterval(bounce,90); 
} // end of start bounce function 

</script> 

</head> 

<body> 

<h2>Jackhammer Man</h2> 

<img src="jackhammer0.gif" onMouseOver="startBouncing();" onMouseOut="clearInterval(begin);" alt="Jack Hammer Man" /> 

</body>

有什麼建議？

來源

2015-11-05 Charles Bahena

我建議這樣的事情

function endBouncing() { 
    clearInterval(begin); 
    curJackHammer = 0; 
    bounce(); 
}

然後設置你的onMouseOut處理程序endBouncing()

來源

2015-11-05 19:52:32 CollinD

這項工作，但好像我有一個錯字。 –

對不起，我猜我不清楚@CharlesBahena這是否工作，或有一些進一步的問題？ – CollinD

用JackHammer鼠標動畫圖像

回答

相關問題