我尝试了很多不同的东西,但似乎没有任何效果,所以我希望这里有人有空闲时间并想提供帮助。我正在尝试为精灵条的动画创建 javascript,该动画具有 11 个垂直堆叠的图像,每帧为 640 x 889。我希望动画在窗口打开时开始并在帧中来回运行 3 次然后停止. 有 11 帧,序列应该是 1....11 然后 11...1,3 次,总共需要 3 秒来完成三个循环。在此先感谢您的帮助。
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.8.2.js"></script>
<meta name ="viewport" content = "width=640, user-scalable=yes">
<link rel="stylesheet" href="animate.css"/>
<title>Website</title>
</head>
<body>
<div id="bmw-glow">
<script type="text/javascript">
var fps = 11,
currentFrame = 0,
totalFrames = 11,
elem = document.getElementById("bmw-glow"),
currentTime = new Date().getTime();
(function animloop(time){
var delta = (time - currentTime) / 1000;
currentFrame += (delta * fps);
var frameNum = Math.floor(currentFrame);
if (frameNum >= totalFrames) {
currentFrame = frameNum = 0;
}
requestAnimationFrame(animloop);
elem.style.backgroundPosition = "0 -" + (frameNum * 889) + "px";
currentTime = time;
})(currentTime);
</script>
</div>
</body>
</html>
CSS:
#bmw-glow {
width: 640px;
height: 889px;
margin: 0px;
background: url("images/Social/Social_6_S.jpg");
}