gpt4 book ai didi

Javascript 代码不循环

转载 作者:行者123 更新时间:2023-11-28 12:37:06 25 4
gpt4 key购买 nike

大家好我只使用 javascript 和 css 技术制作 Sprite 动画,但它不会做任何循环。当它到达图像的末尾时,它已经变成了空白图像。

这是我的代码:

<html>  
<head>
<style type="text/css">
.container
{
width: 512px;
height: 512px;
overflow: hidden;
}
</style>

<script type='text/javascript'>
document.onreadystatechange = function ()
{
if (document.readyState == "complete")
{
setInterval(next, 100);
}
else
{
return false;
}
}

var frame = 1;

function next()
{
var left = 512 * frame;
var top = 0;
var elementStyle = document.getElementById('image').style;

elementStyle.position = "relative";
elementStyle.top = '-'+top+'px';
elementStyle.left = '-'+left+'px';

frame++;
}
</script>
</head>
<body>
<div class="container">
<img id="image" src="flame_sprite.png" />
</div>
</body>
</html>

这是我用来测试代码的图片:

http://www.thecave.info/wp-content/uploads/2014/08/flame_sprite.png

如果有人可以帮助我修复它,请向我解释我的代码有什么问题,我非常感谢。

最佳答案

你的图片有 6 帧,你必须在它上面循环,添加 if(frame == 6 ) frame = 0; 来重新启动你的动画。

function next()
{
if(frame == 6 ) frame = 0;

var left = 512 * frame;

var top = 0;

var elementStyle = document.getElementById('image').style;

elementStyle.position = "relative";

elementStyle.top = '-'+top+'px';

elementStyle.left = '-'+left+'px';

frame++;

}

显示结果:http://jsfiddle.net/59yhuk8L/

关于Javascript 代码不循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27355315/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com