gpt4 book ai didi

javascript - gif 动画反转为另一个 gf

转载 作者:行者123 更新时间:2023-12-02 18:15:20 24 4
gpt4 key购买 nike

我有一个 GIF 动画,一只猫从左跑到右,然后转身从右跑到左。看来我的代码中的所有内容都是正确的。在我的代码过于复杂之前,它似乎工作得很好,但是移动时 gif 被卡住了。现在我修改了代码,但现在 gif 不会反转为另一个 gif。它只是从左向右运行,然后向后运行。我似乎在我的代码中找不到任何错误。有人可以帮忙吗?

<html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
#container {
background:url(catBack1200.jpg) no-repeat;
width:1200px;
height:440px;
}
#catbox {
position:absolute;
top:330px;
left:10px;
}
</style>
<script type="text/javascript">
var switchDirection = false;
function doAnimation() {
var catbox = document.getElementById("catbox");
var catimg = document.getElementById("cat");
var currentLeft = catbox.offsetLeft;
var newLocation;

if (switchDirection == false)
{
newLocation = currentLeft + 3;
catimg.src == "ani_cat.gif";

if (currentLeft >= 600)
{
switchDirection = true;
}
}
else
{
newLocation = currentLeft - 3;
catimg.src == "ani_cat_rev.gif";

if (currentLeft <= 0)
{
switchDirection = false;
}
}

catbox.style.left = newLocation + "px";
}
</script>
</head>

<body onload="setInterval(doAnimation, 10)">
<div id="container">
<div id="catbox">
<img src="ani_cat.gif" id="cat" width="100" height="60" alt="busy kitty" />
</div>
</div>
</body>
</html>

最佳答案

设置图像时,使用“=”而不是“==”,我想这会是拼写错误。

不要为每个动画设置 src。而是在切换时设置它:

if (switchDirection == false) {
newLocation = currentLeft + 3;

if (currentLeft >= 600) {
catimg.src = "ani_cat_rev.gif";
switchDirection = true;
}
} else {
newLocation = currentLeft - 3;

if (currentLeft <= 0) {
catimg.src = "ani_cat.gif";
switchDirection = false;
}
}

关于javascript - gif 动画反转为另一个 gf,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19346416/

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