根据上一个实例，做到灵活应用和代码复用，把参数大部分改为形参形式传进来。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background: red;
/*因为在IE浏览器中如果没有指定的值，就默认auto，所以我们需要先指定一个值*/
position: absolute;
left: 0;
}
#box2{
width: 100px;
height: 100px;
background: red;
/*因为在IE浏览器中如果没有指定的值，就默认auto，所以我们需要先指定一个值*/
position: absolute;
left: 0;
top: 200px;
}
</style>
<script type="text/javascript" src="../js/tools.js"></script>
<script type="text/javascript">
window.onload = function(){
/*
* 假如我们创建多个按钮来同时控制多个div移动的话，但是每次都是点击后，就关闭上一个定时器标识
* 所以点击第一个div移动后再点击第二个div移动的时候，第一个div就会停下来了，因为关闭了上一个定时器的标识了。
* 目前我们的定时器的标识由全局变量timer保存。
* 所有的执行正在执行的定时器都在这个变量中保存。
* 那么所要操作的就是把timer变成对象自己的就可以了，给timer添加一个这样子的属性就好了。
* 就不需要定义一个全局的timer了。
*/
// var timer;
box1 = document.getElementById("box1");
box2 = document.getElementById("box2");
btn = document.getElementById("btn");
btn01 = document.getElementById("btn1");
btn02 = document.getElementById("btn2");
test = document.getElementById("test");
btn.onclick = function(){
move(box1,800,10,'left');
}
btn01.onclick = function(){
move(box1,0,10,'left');
}
btn02.onclick = function(){
move(box2,800,10,'left');
};
test.onclick = function(){
// move(box2,800,10,'width');
// move(box2,800,10,'top');
move(box2,800,10,'height',function(){
move(box2,800,10,'width');
});
}
//获取元素的值
function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name]
}
else{
return obj.currentStyle[name]
}
}
//需求是点击button，div就一直往左移动
/*
* 如果存在多个按钮的话，不能直接复制太多重复的代码，希望可以复用代码，
* 所以需要写一个移动的函数来操作
* 参数：
* obj:哪个按钮
* attr:要执行动画的样式，比如：left top width，height
* target：移动停止的阈值
* speed ：移动的速度，如果为正则向右移动，为负则向左移动
* 但是每次move都要传正负，不太好，希望程序自己可以判断
* 判断速度的正负值
* 如果从0向800移动，则speed为正
* 如果从800向0移动，则speed为负
*
* attr width top hegiht left
*
* 回调函数 callback 动画执行完毕后执行。比如说执行向左还想执行向右，那就需要根据回调函数执行
*/
function move(obj,target,speed,attr,callback){
//清除上一个定时器
clearInterval(obj.timer);
//开启一个定时器，用来执行动画效果
//向执行动画的对象中添加一个timer属性，用来半寸它自己的定时器的标识。
obj.timer = setInterval(function(){
//获取box1原来的left值，通过复用的函数去获取,parseInt是把字符串的数字部分转换为number
var oldlvalue = parseInt(getStyle(obj,attr));
//判断是向左还是向右
if(oldlvalue>target){
speed = -speed;
}
newvalue = oldlvalue + speed;
/*
* 判断newvalue是否大于800
* 从800向0移动
* 向左移动时，需要判断newvalue是否小于target
* 向右移动时，需要判断newvalue是否大于target
*/
if((speed>0&&newvalue>target) || (speed<0&&newvalue<target)){
newvalue = target;
}
obj.style[attr] = newvalue + "px";
/*
* 控制移动的位置，当800px时，就停止移动
*/
if(newvalue === target){
clearInterval(obj.timer);
callback && callback()
}
},300)
}
}
</script>
</head>
<body>
<button id="btn">点击div向右移动</button>
<button id="btn1">点击div向左移动</button>
<button id="btn2">点击div2向右移动</button>
<button id="test">测试按钮</button>
<br /><br />
<div id="box1"></div>
<div id="box2"></div>
<br />
</body>
</html>
这里的js是一个内部的js，做到多人应用，需要提取到外部js
新建一个tools.js
//需求是点击button，div就一直往左移动
/*
* 如果存在多个按钮的话，不能直接复制太多重复的代码，希望可以复用代码，
* 所以需要写一个移动的函数来操作
* 参数：
* obj:哪个按钮
* attr:要执行动画的样式，比如：left top width，height
* target：移动停止的阈值
* speed ：移动的速度，如果为正则向右移动，为负则向左移动
* 但是每次move都要传正负，不太好，希望程序自己可以判断
* 判断速度的正负值
* 如果从0向800移动，则speed为正
* 如果从800向0移动，则speed为负
*
* attr width top hegiht left
*
* 回调函数 callback 动画执行完毕后执行。比如说执行向左还想执行向右，那就需要根据回调函数执行
*/
function move(obj,target,speed,attr,callback){
//清除上一个定时器
clearInterval(obj.timer);
//开启一个定时器，用来执行动画效果
//向执行动画的对象中添加一个timer属性，用来半寸它自己的定时器的标识。
obj.timer = setInterval(function(){
//获取box1原来的left值，通过复用的函数去获取,parseInt是把字符串的数字部分转换为number
var oldlvalue = parseInt(getStyle(obj,attr));
//判断是向左还是向右
if(oldlvalue>target){
speed = -speed;
}
newvalue = oldlvalue + speed;
/*
* 判断newvalue是否大于800
* 从800向0移动
* 向左移动时，需要判断newvalue是否小于target
* 向右移动时，需要判断newvalue是否大于target
*/
if((speed>0&&newvalue>target) || (speed<0&&newvalue<target)){
newvalue = target;
}
obj.style[attr] = newvalue + "px";
/*
* 控制移动的位置，当800px时，就停止移动
*/
if(newvalue === target){
clearInterval(obj.timer);
callback && callback()
}
},300)
}
//获取元素的值
function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name]
}
else{
return obj.currentStyle[name]
}
}
应用的时候只要引入就可以了
<script type="text/javascript" src="../js/tools.js"></script>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
