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)
}
}
四、最终效果
相关推荐
-
「nginx」十、nginx的location配置详解2026-07-04 00:51:45 -
最清晰的mysql体系架构图 ，助你深度掌握MySQL开发管理，赢在大数据时代
最清晰的mysql体系架构图 ，助你深度掌握MySQL开发管理，赢在大数据时代2026-07-04 00:21:47 -
PHP读取Excel内的图片2026-07-03 00:07:41 -
mysql:Otter跨机房数据同步(单向)2026-07-03 00:02:48 -
在windows10系统下搭建IIS+PHP+MYSQL+phpMyAdmin服务器运行环境
在windows10系统下搭建IIS+PHP+MYSQL+phpMyAdmin服务器运行环境2026-07-02 00:15:08