JS push 到指定位置停止
677人浏览 2023-10-23 14:38:00
一、HTML
<div id="div1"></div>
<input id="btn1" type="button" value="开始移动" />
<div id="div2"></div>
二、CSS
*{margin: 0;padding: 0;}
#div1{
width: 100px;height: 90px;background: red;
position: absolute;left: 0;top: 50px;
}
#div2{
width: 1px;height: 200px;background: black;
position: absolute;left: 300px;top: 0;
}
三、javascript
window.onload=function(){
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
var timer=null;
oBtn.onclick=function(){
clearInterval(timer);
timer=setInterval(function(){
if (oDiv.offsetLeft>=300) {
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+5+'px';
}
},30)
}
}
四、最终效果
相关推荐
-
PHP8种变量类型的详细讲解2025-02-22 00:32:24 -
php+apache 和 php+nginx的区别2025-02-22 00:21:27 -
PHP：与workerman结合实现定时任务2025-02-22 00:15:57 -
Nginx的Rewrite规则与实例2025-02-22 00:15:39 -
MySql中身份证字段的简单脱敏介绍2025-02-22 00:15:36