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

标签 javascript html if-statement time

我想创建一个像fly()这样的新函数,它将在暂停20秒后反转fly()所做的事情。原始的fly()函数将图像从左侧水平移动到屏幕外页面中心,图像保持静态。

我想创建一个函数,在图像保持静止 20 秒后将其移回屏幕外。 “20秒后”的部分是最让我悲伤的。如果您可以向我展示一个新函数是什么样子,或者对当前函数进行“其他”添加,那就太好了。

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

<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>

最佳答案

最简单的是在达到 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);
    }
} 

关于javascript - JS - 移动图像,暂停设定时间,然后将图像移回,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29116759/

相关文章:

javascript - 从 JS 文件调用组件函数

javascript - 无法在加载的 svg 上调用 getElementsByTagName

javascript - 使用 jQuery 创建新的表单字段

html - CSS响应与奇怪的布局

javascript - 我们可以通过 css 将 div 元素强制为 "wrap"吗?

VBA 检查范围内的值

javascript - 检索 document.cookie getter 和 setter

c - if 语句和 puts()

c++ - if/else 在 C++ 的编译时?

php - 如何控制单选按钮?从数据库、PHP、MYSQL 回显数据