首页 > 代码库 > 简单的入门小动画
简单的入门小动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> #div1{height:100px;width:100px;position:absolute;top:50;left:10px;background:red;}</style><body> <input type="button" value="向前" id = ‘btn1‘> <input type="button" value="向后" id = ‘btn2‘> <div id="div1"></div> <script> function getEle(_id){ return document.getElementById(_id); } var oBtn1 = getEle(‘btn1‘); var oBtn2 = getEle(‘btn2‘); var oDiv = getEle(‘div1‘); oBtn1.onclick = function(){ doMove(oDiv, 12, 800); } oBtn2.onclick = function(){ doMove(oDiv, -12, 10); } function doMove(obj, dir, target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = parseInt(getStyle(obj,‘left‘)) + dir; if(speed > target && dir > 0){ speed = target; } if(speed < target && dir < 0){ speed = target; } obj.style.left = speed + ‘px‘; if(speed == target){ clearInterval(obj.timer); } },30) } function getStyle(obj,attr){ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]; } </script></body></html>
简单的入门小动画
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。