一、提取函数
1.1封装一个函数搞定大部分动画效果
这个函数提取的思想就是，通过改变对象的属性，改变对象呈现，实现动画效果
/*
* 参数
* obj要执行动画的对象
* attr:要执行动画的样式，比如，left，top，length
* target：执行动画的目标位置
* speed移动的速度(都为正数)
* callback:回调函数，动画执行完毕之后执行
*/
function move(obj,attr,target,speed,callback){
//关闭上一个定时器，避免执行一次函数就出现一个定时器
clearInterval(obj.timer);
//获取对象原来样式值
var current =parseInt(getStyle(obj,attr));//parseInt取字符串合法数字，getstyle返回的为数字+px
//判断速度的正负值
//比如从0到800，则speed为正，如果800向0，则speed为负
if(current > target){
speed =-speed;
}
//开启一个定时器，执行动画效果
//向执行动画的对象中添加一个timer属性，用来保存自己的定时器标识
obj.timer = setInterval(function(){
//获取box1原来left值
var oldValue =parseInt(getStyle(obj,attr));
//在旧值的基础上增加
var newValue = oldValue + speed;
//向左移动时，需要判断newvalue是否小于target
//向右移动时，需要判断newvalue是否大于target
if((speed<0 && newValue<target) || (speed>0 && newValue>target)){
newValue=target;
}
//将新值设置给obj，style[attr]为属性
obj.style[attr]=newValue +"px";
//当元素移动到目标点
if(newValue == target){
clearInterval(obj.timer);
//动画完毕，调用回调函数
//如果有回调函数，就调，没有就不调
callback && callback();
}
},30)
}
1.2获取当前样式值函数
/**
* 定义一个函数,用来获取指定元素的当前样式
* 参数:
* - obj 要获取样式的元素
* - name 要获取的样式名
*/
function getStyle(obj,name){
if(window.getComputedStyle){
//正常浏览器的方式
return getComputedStyle(obj,null)[name];
}else{
//IE8的方式
return obj.currentStyle[name];
}
}
1.3如何调用
实现效果：点击按钮，让box向右移动到200px停止
CSS代码及body代码
<style type="text/css">
*{margin: 0; padding: 0;}
#box1{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
left: 0;
}
<style/>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<br/> <br/>
<div id="box1"></div>
<div style="width: 0; height: 1000px; border-left: 1px black solid; position: absolute; left: 200px;top: 0;"></div>
</body>
JS代码调用函数
<script type="text/javascript">
window.onload = function(){
//获取box1
var box1=document.getElementById("box1");
//获取btn01
var btn01 = document.getElementById("btn01");
//点击按钮以后，box1按钮向右移动(left增大)
btn01.onclick=function(){
move(box1,"left",200,20);
}
</script>
二、关于如何JS封装
不让程序写死的方法，总体来说
- 1.用变量，比如：obj[name]是对象属性的意思，通过传入name得到obj的哪个属性
- 2.求统一，比如：上面函数的speed，在函数中设置传入正数负数可以
