Question

所以我在这里遇到一个小问题。一旦你用鼠标移动图像，我设法让动画播放，但它会继续通过它。我总共有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>

有什么建议吗？

Answer 1

我建议这样的事情

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

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

鼠标在JackHammer图像上的动画

1 个答案: