<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击按钮控制div前后运动——函数封装1</title>
<style>
#div1{ width: 100px; height: 100px; background: #ccc; position: absolute; left: 30px; top: 50px;}
</style>
</head>
<body>
<input type="button" id="btn1" value="向后" />
<input type="button" id="btn2" value="向前" />
<div id="div1"></div>
<script>
// 封装获取非行间样式函数
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
};
window.onload = function(){
// 获取样式
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oDiv = document.getElementById('div1');
// alert(getStyle( oDiv, 'left' )); //测试getStyle函数
// 向后[←]运动
oBtn1.onclick = function(){
doMove(oDiv ,-11 ,10);
};
// 向前[→]运动
oBtn2.onclick = function(){
doMove(oDiv ,11 ,500);
};
/*
oDiv 11 800 >
oDiv -11 -10 <
doMove ( oDiv, 11, 800 );
*/
// 封装doMove函数
function doMove(obj,dir,target){
clearInterval(obj.timer);
obj.timer = setInterval (function(){
var dis = parseInt(getStyle(obj,'left')) + dir;
// 向前[→]运动
if(dis > target && dir > 0){
dis = target;
}
// 向后[←]运动
if(dis < target && dir < 0){
dis = target;
}
obj.style.left = dis + 'px';
console.log(dis); //控制台输出距离变化
if(dis == target){
clearInterval(obj.timer);
}
},30);
};
};
</script>
</body>
</html>
复制代码,运行查看效果