实践课__元素移动封装
Posted 落寞回头不如华丽转身
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实践课__元素移动封装相关的知识，希望对你有一定的参考价值。
<!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="往上" /> <input id="btn2" type="button" value="往下" /> <input id="btn3" type="button" value="往左" /> <input id="btn4" type="button" value="往右" /> <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>
以上是关于实践课__元素移动封装的主要内容，如果未能解决你的问题，请参考以下文章