首页 > 代码库 > 实践课__元素移动封装
实践课__元素移动封装
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div { width: 100px; height: 100px; background-color: red; top: 50px; left: 30px; position: absolute; transition: 0.5; } </style> </head> <body> <input id="btn1" type="button" value="http://www.mamicode.com/往上" /> <input id="btn2" type="button" value="http://www.mamicode.com/往下" /> <input id="btn3" type="button" value="http://www.mamicode.com/往左" /> <input id="btn4" type="button" value="http://www.mamicode.com/往右" /> <div id="div1"></div> <script> var oBtn1 = document.getElementById(‘btn1‘); var oBtn2 = document.getElementById(‘btn2‘); var oBtn3 = document.getElementById(‘btn3‘); var oBtn4 = document.getElementById(‘btn4‘); var oDiv = document.getElementById(‘div1‘); oBtn1.onclick = function () { doMove ( oDiv, ‘top‘, 12, 40 ); }; oBtn2.onclick = function () { doMove ( oDiv, ‘top‘, 12, 500 ); }; oBtn3.onclick = function(){ doMove(oDiv, ‘left‘, 12 , 10); } oBtn4.onclick = function(){ doMove(oDiv, ‘left‘, 12, 800); }; function doMove ( obj, attr, dir, target ) { dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir; clearInterval( obj.timer ); obj.timer = setInterval(function () { var speed = parseInt(getStyle( obj, attr )) + dir; // 步长 if ( speed > target && dir > 0 || speed < target && dir < 0 ) { speed = target; } obj.style[attr] = 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个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。