標籤：
<!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>
實踐課__元素移動封裝
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
