摘要：动画函数封装单物体运动对一个进行宽高属性的变化，对透明度属性进行变化。这里还要注意的是定时器不能共用，要多带带设置自己的定时器。具体学习视频参考慕课网动画效果
js动画函数封装--单物体运动
对一个div进行宽高属性的变化，对透明度属性进行变化。
*{margin: 0; padding: 0;} /*样式*/
分享 /*结构*/
#parent {position: relative; width: 200px; height: 200px; background-color: #f00; margin-left: -200px;}
#son {position: absolute; width: 30px; height: 50px; background-color: green; top: 50%; right:-30px; transform: translateY(-50%); text-align: center; }
window.onload=function(){ //首先加载函数在dom加载后
var parent=document.getElementById("parent"); //获得父级dom元素
parent.onmousemove=function(){ //当鼠标在父级元素上移动时，触发事件
move(10,0); //move 函数对进行处理
}
parent.onmouseout=function(){ //当鼠标离开父级元素时，触发事件
move(-10,-200); }}
var timer=null;
function move(speed,target){
clearInterval(timer); //每次在进入move之前都清除定时器
var parent=document.getElementById("parent");
timer=setInterval(function(){ //设置定时器
if(parent.offsetLeft==target){ //假如满足条件，清除定时器
clearInterval(timer);
}else{ //否则进行进一步处理
parent.style.marginLeft=parent.offsetLeft+speed+"px";
}
},30);
} /*js代码*/
这里可能像我这样的新手对 parent.offsetLeft、marginLeft对这些属性比较陌生，具体可以参考这篇文章 offsetLeft,有图有真相。
透明度属性的处理
#opcity {width: 200px; height: 200px; background-color: #f00; filter: alpha(opacity=30); /*兼容IE9 以下*/opacity: 0.3; } /*样式*/
/*结构*/
window.onload=function(){
var opcity=document.getElementById("opcity");
opcity.onmousemove=function(){
move(100);
}
opcity.onmouseout=function(){
move(30);
}
}
var timer=null;
var op=30;
function move(arg){
clearInterval(timer);
var opcity=document.getElementById("opcity");
timer=setInterval(function(){
var speed=0;
if(op
这里的代码基本和上面基本上是一样的，主要是要对 opacity进行处理，这里在后面还有一种处理办法，由于opacity 传进来是0.3这样的小数，可以先用parseFloat()对opacity进行处理，然后在乘以100使其变成一个整数，然后在进行后面的处理。
js动画函数封装--多物体运动
div {width: 400px; height: 200px; background-color: yellow; border: 2px solid #666; margin-bottom: 20px;} /*样式*/
/*结构*/
window.onload=function(){
var test= document.getElementById("test");
var test1= document.getElementById("test1");
test.timer=null;
test1.timer=null;
test.onmouseover=function(){
move(this,"width",200);
}
test.onmouseout=function(){
move(this,"width",400);
}
test1.onmouseover=function(){
move(this,"height",400);
}
test1.onmouseout=function(){
move(this,"height",200);
}
}
function move(obj,attr,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var pa= parseInt(getStyle(obj,attr));
var speed=(target-pa)/8;
speed=(speed>0)?Math.ceil(speed):Math.floor(speed);
obj.style[attr]=pa+speed+"px";
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]; /*IE 方法*/
}else {
return getComputedStyle(obj,false)[attr]; /*chrome ,ff*/
}
} /*js代码*/
这里新封装一个函数，getStyle()用来获取DOM元素样式,对currentStyle和 getComputedStyle有疑问的可以参考一下张鑫旭大神的这篇文章currentStyle getComputedStyle，到这一步开始有进一步对函数的封装，记得开始的时候单物体运动的时候，只有一个属性，只需要传一个参数，对 opacity的处理大致也差不多，只是要多一点转化，对于多物体运动，属性的值是在变化的，而且test test1一个改变宽，一个改变高，所以可以对函数可以进一步封装，这里对于opacity处理是有问题的，需要在函数内部进行判断，选择不同的分支。这里还要注意的是定时器不能共用，要多带带设置自己的定时器。
js动画函数封装--缓冲运动
基本结构和上面单物体结构相同