JavaScript div 上下运动实例
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style> 8 #div1{width:100px;height:100px;background: red;position:absolute;left:30px;top:50px; border-radius: 50px;} 9 </style> 10 <script type="text/javascript"> 11 window.onload = function () { 12 var oBtn1 = document.getElementById('btn1'); 13 var oBtn2 = document.getElementById('btn2'); 14 var oDiv = document.getElementById('div1'); 15 16 oBtn1.onclick = function () { 17 doMove(oDiv, -12, 10); // 直接就回到原点,原因是没判断大于小于号 18 } 19 20 oBtn2.onclick = function () { 21 doMove(oDiv, 12, 800); 22 } 23 24 // obj--移动对象,dir--方向,target--目标点 25 function doMove(obj, dir, target) { 26 clearInterval(obj.timer); 27 obj.timer = setInterval(function () { 28 var speed = parseInt(getStyle(obj, 'left')) + dir; 29 if (speed > target && dir > 0) { // 往前跑 30 speed = target; 31 } 32 33 if (speed < target && dir < 0) { // 往后跑 34 speed = target; 35 } 36 obj.style.left = speed + 'px' 37 if (speed == target) { 38 clearInterval(obj.timer); 39 } 40 }, 30) 41 } 42 43 function getStyle(obj, attr) { 44 return getComputedStyle(obj)[attr]; 45 } 46 } 47 </script> 48 </head> 49 50 <body> 51 <input id="btn1" type="button" value="向前"> 52 <input id="btn2" type="button" value="向后"> 53 <div id="div1"></div> 54 </body> 55 56 </html>
obj--移动对象,dir--方向,target--目标点
本文作者:Mahmud(مەھمۇد)
本文链接:https://www.cnblogs.com/mahmud/p/10101874.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!