用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鼠标动画图像

回答

相关问题