js动画函数封装–单物体活动
对一个div举行宽高属性的变化，对透明度属性举行变化。
*{margin: 0; padding: 0;} /\*款式\*/ <div id="parent"><div id="son">分享</div> </div> /*构造*/ #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; } /*款式*/ <div id="opcity"></div> /*构造*/ 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<arg){ speed=10; }else { speed=-10; } if(op==arg){ clearInterval(timer); }else { op+=speed; opcity.style.filter="alpha(opacity="+op+")"; /*兼容IE的写法*/ opcity.style.opacity=op/100; } },30); } /*js代码*/这里的代码基础和上面基础上是一样的，主如果要对
opacity举行处置惩罚，这里在背面另有一种处置惩罚要领，因为opacity传进来是0.3如许的小数，能够先用parseFloat()对opacity举行处置惩罚，然后在乘以100使其变成一个整数，然后在举行背面的处置惩罚。
js动画函数封装–多物体活动
div {width: 400px; height: 200px; background-color: yellow; border: 2px solid #666; margin-bottom: 20px;} /*款式*/
<div id="test"></div>
<div id="test1"></div> /*构造*/
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动画函数封装–缓冲活动
基础构造和上面单物体构造雷同
<script type="text/javascript">
window.onload=function(){
var parent=document.getElementById("parent");
parent.onmousemove=function(){
move(0);
}
parent.onmouseout=function(){
move(-200);
}
}
var timer=null;
function move(target){
clearInterval(timer);
var parent=document.getElementById("parent");
timer=setInterval(function(){
var speed=(target-parent.offsetLeft)/20; //缓冲活动
speed=(speed>0)?Math.ceil(speed):Math.floor(speed);
if(parent.offsetLeft==target){
clearInterval(timer);
}else {
parent.style.marginLeft=parent.offsetLeft+speed+"px";
}
},30);
}再单物体活动中，我们每次都是加上一个恒定大小的值，实在就是一个匀速活动，为了做一个缓冲活动，我们起首联想到火车进站的时刻，平常都是先加快，在减速，末了逐步加快脱离，缓冲活动就相似这类状况parent.style.marginLeft=parent.offsetLeft+speed+"px";，经由过程传过来的目的参数与现实款式的值举行一个做差处置惩罚，然后除以一个数字，刚最先是极值，speed的值变化较大，到背面跟着两值比较靠近，speed愈来愈趋近与0，为了末了能到达目的值，要让speed变成1，再逐步到达目的值，所以会运用Math.floor()和 Math.ceil()向上取整和向下取整函数，如果speed>0,则像上取整，如果speed<0,则向下取整，取值+1和-1.
js动画函数封装–单物体的多属性同时活动
<div id="test"></div>
div {width: 400px; height: 200px; background-color: yellow; border: 2px solid #666; margin-bottom: 20px; filter: alpha(opacity=30); /**兼容IE 6*/ opacity: 0.3;}
window.onload=function(){
var test= document.getElementById("test");
test.timer=null;
test.alpha=30;
test.onmouseover=function(){
move(this,{"width": 600, "height": 400, "opacity": 100});
}
test.onmouseout=function(){
move(this,{"width": 400, "height": 200, "opacity": 30})
}
}
var flag=true;
function move(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(attr in json){
if(attr=="opacity"){
var pa= parseFloat(getStyle(obj,attr))*100;
}else{
var pa= parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-pa)/8;
speed=(speed>0)?Math.ceil(speed):Math.floor(speed);
if(json[attr]!=pa){
flag=false;
}
if(attr=="opacity"){
obj.alpha+=speed;
obj.style.filter="alpha(opacity="+obj.alpha+")";
obj.style[attr]=(obj.alpha)/100;
}else{
obj.style[attr]=pa+speed+"px";
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else {
return getComputedStyle(obj,false)[attr];
}
}为了完成单物体的多属性同时活动，运用到json花样传参，然后对json里的每个属性，在定时器里用for in轮回举行遍历，用getStyle()对猎取属性举行处置惩罚。
js动画函数封装–单物体的链式活动
.clearfix:after {content: "."; display: block; clear: both; visibility: hidden; height: 0;}
*{margin: 0; padding: 0;}
#content {width: 660px; height: 210px; border: 2px solid #ccc; margin :20px auto; font-size: 0;}
#content a {position: relative; display: inline-block; width: 120px; height: 80px; text-align: center; font: bold 14px/1 Arial; color: #f3f3f3; text-decoration: none; border: 2px solid orange; margin: 10px 20px;}
#content a:hover {color: orange;}
#content a p {position: relative; margin-top: 10px; bottom: -45px;}
#content a i {position: absolute; top: 5px; left: 40px; display: inline-block; filter: alpha(opacity=100); opacity: 1;}
<div id="content">
<a href="#">
<i><img src="images/001.jpg" alt=""></i>
<p>便民</p>
</a>
<a href="#">
<i><img src="images/002.jpg" alt=""></i>
<p>充值</p>
</a>
<a href="#">
<i><img src="images/003.jpg" alt=""></i>
<p>游览</p>
</a>
<a href="#">
<i><img src="images/004.jpg" alt=""></i>
<p>缴费</p>
</a>
<a href="#">
<i><img src="images/005.jpg" alt=""></i>
<p>影戏</p>
</a>
<a href="#">
<i><img src="images/006.jpg" alt=""></i>
<p>音乐</p>
</a>
<a href="#">
<i><img src="images/007.jpg" alt=""></i>
<p>教诲</p>
</a>
<a href="#">
<i><img src="images/008.jpg" alt=""></i>
<p>动力</p>
</a>
</div>
window.onload=function(){
var content= document.getElementById("content");
var links= content.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].onmouseenter=function(){
var inode=this.getElementsByTagName("i")[0];
inode.timer=null;
inode.alpha=30;
move(inode,{marginTop:-40,opacity: 0},function(){
inode.style.marginTop=20+"px";
move(inode,{marginTop:5,opacity: 100});
});
}
}
}
//猎取款式
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else {
return getComputedStyle(obj,false)[attr];
}
}
//move 函数
function move(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;
for(attr in json){
if(attr=="opacity"){
var pa= parseFloat(getStyle(obj,attr))*100;
}else{
var pa= parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-pa)/8;
speed=(speed>0)?Math.ceil(speed):Math.floor(speed);
if(json[attr]!=pa){
flag=false;
}
if(attr=="opacity"){
obj.alpha+=speed;
obj.style.filter="alpha(opacity="+obj.alpha+")";
obj.style[attr]=(obj.alpha)/100;
}else{
obj.style[attr]=pa+speed+"px";
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else {
return getComputedStyle(obj,false)[attr];
}
}关于链式活动，起首move()函数自身多传入一个函数参数，在move()函数在在处置惩罚好函数体的变化后，如果函数参数有值传入，则要实行背面的函数体，如果背面的参数另有函数参数，则能够继承实行下去，如许就形成了一条实行链。我上面这个列子另有一些题目，当你鼠标挪动过快，会发生闪灼。详细进修视频参考慕课网JS动画结果.
