JS - 移动图像，暂停设定时间，然后将图像移回

Question

我想创建一个像 fly() 这样的新函数，它将 反转 fly() 在暂停 20 秒后执行的操作。 原始 fly() 函数将图像移出屏幕从左侧水平到页面中心，图像保持静止。

我想创建一个函数，在图像保持静止 20 秒后将其移回屏幕外。 "after 20 seconds" 部分让我最伤心。如果您能告诉我新功能的外观或 'else' 对当前功能的补充，那就太好了。

如果可能，请根据我所掌握的内容保持简单，以便我理解。

<script language="JavaScript" type="text/JavaScript">

var x = -500;   
var y = 100;  


function fly(val) {

if (x <= 500){
x = x + val;    
document.getElementById("pos").style.left = x + "px";
setTimeout("fly(5)", 10);
}

}
</script>

<style type="text/css">
<!--
#pos {
position: absolute;
left: -500px;
top: 100px;
z-index: 0;
}

</style>


<body onLoad="setTimeout('fly(5)',5000)">
<div id="pos"> 
<a href="#"><img src="image.jpg"></a>
</div>

Answer 1

最简单的是在达到 x=500 的限制后设置超时，正如您所说的 else 子句：

var x = -500;

function fly(val) {
    if (x <= 500){
       x = x + val;    
       document.getElementById("pos").style.left = x + "px";
       setTimeout("fly(5)", 10);
    }
    else {
       setTimeout("flyBack(5)", 20000);
    }

} 

function flyBack(val) {
    if (x >= -500){
       x = x - val;    
       document.getElementById("pos").style.left = x + "px";
       setTimeout("flyBack(5)", 10);
    }
}

JS - 移动图像，暂停设定时间，然后将图像移回

JS - Moving an image, pausing for set time, then moving image back

html

javascript

time

if-statement