我读了一篇关于动画图片的好文章here。
因为，我试图对其进行修改，因此只有当用户将鼠标悬停在图像的边界上时，图像才会生成动画，但当他将鼠标悬停在图像边界之外时，图像会停止。没有骰子......
以下是规格：
HTML：
<html>
<head>
<title></title>
<!-- link header php -->
<?php include 'header.php'; ?>
<!-- link animation javaScript -->
<script type="text/javascript" src="js/robot_animation.js"></script>
</head>
<body>
<!-- the result -->
<div id="robot"></div>
</body>
</html>
CSS:
#robot {
width: 150px;
height: 85px;
background-image:url(../images/al.jpeg);
background-color: green;
background-repeat: no-repeat;
background-position: 0 0;
}
JS:
div.onmouseover =(function startAnimation() {
//set some variables
var frameHeight = 85;
var frames = 12;
var frame = 0;
// grab properties from stylesheet
var div = document.getElementById("robot");
//
setInterval(function ()
{
var frameOffset = (++frame % frames) * -frameHeight;
div.style.backgroundPosition = "0px " + frameOffset + "px";
}, 600);
});