实践课__元素移动封装
<!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>
