带有 JackHammer 图像的鼠标悬停动画答案

【问题标题】：Mouse Over animation with JackHammer image带有 JackHammer 图像的鼠标悬停动画
【发布时间】：2015-11-05 19:50:04
【问题描述】：

所以我在这里解决了一个小问题。一旦你用鼠标在图像上移动，我设法让动画播放，但它一直在播放。我总共有 10 张图像，因此您将鼠标悬停在图像上的时间越长，出现的图像就越多。如果您移开鼠标，它就会停在它停在的任何图像上。我只需要它转到最后一个图像是图像 10 并停在那里，甚至可能重置回图像 0。

<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>

有什么建议吗？

【问题讨论】：

标签： javascript image onmouseover onmouseout

【解决方案1】：

我会建议这样的事情

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

然后将您的 onMouseOut 处理程序设置为 endBouncing()

【讨论】：

抱歉，我想我不太清楚@CharlesBahena 这成功了吗，还是还有其他问题？