首页 > 代码库 > js动画

js动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ani</title>
    <style type="text/css">
    *{
        margin:0px;
        padding:0px;
    }
    ul{
        list-style: none;
        
    }
    ul li{
    height:200px;
    width:200px;
    border:4px solid #233;
    margin-bottom:20px;
    background: yellow;
    }
    #list2{
        filter: alpha(opacity:30);
        opacity: 0.3;
    }
    </style>
    <script>
    window.onload=function(){
    
    //var list=document.getElementsByTagName("li");
      var list0=document.getElementById("list0");
      var list1=document.getElementById("list1");
      var list2=document.getElementById("list2");
      var list3=document.getElementById("list3");
      var list4=document.getElementById("list4");
    /*for(var i=0;i<list.length;i++){
         list[i].timer=null;
        list[i].=function(){
        startmove(this,400);
            
        }
        list[i].onmouseout=function(){
            startmove(this,200);
        }
    }    */
    list0.onmouseover=function(){
        startmove(this,"height",400);}
    list0.onmouseout=function(){
        startmove(this,"height",200);}
    list1.onmouseover=function(){
        startmove(this,"width",400);}
    list1.onmouseout=function(){
        startmove(this,"width",200);}
    list2.onmouseover=function(){
        startmove(this,"opacity",100);}
    list2.onmouseout=function(){
        startmove(this,"opacity",30);}
    list3.onmouseover=function(){
        startmove(list3,"height",400,function(){
            startmove(list3,"width",400,function(){
                startmove(list3,"opacity",30);
            });
        });}
        list3.onmouseout=function(){
        startmove(list3,"opacity",100,function(){
            startmove(list3,"width",200,function(){
                startmove(list3,"height",200);
            });
        });}
    list4.onmouseover=function(){
        startmove1(this,{height :400,width :400,opacity:30});}
    list4.onmouseout=function(){
        startmove1(this,{height :200,width :200,opacity:100});}
function startmove1(obj,json,fn){
    var flag=true;
     clearInterval(obj.timer);     
     obj.timer=setInterval(function(){
     for(var i in json){
         if(i=="opacity"){
             var curr=Math.round(parseFloat(getStyle(obj,i))*100);
             alert(curr);
         }
         else{
         var curr=parseInt(getStyle(obj,i));}
         var speed=(json[i]-curr)/8;
         speed=speed>0?Math.ceil(speed):Math.floor(speed);
         if(curr!=json[i]){
             flag=false;}
         if(i=="opacity"){
             obj.style.filter="alpha(opacity:"+(curr+speed)+")";
             obj.style.opacity=(curr+speed)/100;
         }
         else{
            obj.style[i]=curr+speed+"px";}
 
        if(flag){
          clearInterval(obj.timer);
        }
        if(fn){
             fn();
         
}
} 
     },30);
    }
    function startmove(obj,arr,iTarge,fn){
     clearInterval(obj.timer);     
     obj.timer=setInterval(function(){
         if(arr=="opacity"){
             var curr=Math.round(parseFloat(getStyle(obj,arr))*100);
             alert(curr);
         }
         else{
         var curr=parseInt(getStyle(obj,arr));}
         var speed=(iTarge-curr)/8;
         speed=speed>0?Math.ceil(speed):Math.floor(speed);
         if(curr==iTarge){
         clearInterval(obj.timer);
         if(fn){
             fn();
         }
         }
     else{
         if(arr=="opacity"){
             obj.style.filter="alpha(opacity:"+(curr+speed)+")";
             obj.style.opacity=(curr+speed)/100;
         }
         else{
            obj.style[arr]=curr+speed+"px";}
 }
     },30);
    }
    function getStyle(obj,arr){
        if(obj.currentStyle){
            //alert(obj.currentStyle[arr]);
            return obj.currentStyle[arr];
        }
        else{
            return getComputedStyle(obj,false)[arr];
        }
    }
}
    </script>
</head>
<body>
<div><ul>
    <li id="list0"></li>
    <li id="list1"></li>
    <li id="list2"></li>
    <li id="list3"></li>
    <li id="list4"></li>
</ul></div>
</body>
</html>

五个li前三个都是只改变高、宽、透明度中的其中一个。第四个是链式动画,当鼠标移入的时候先改变高度再改变宽度,最后再改变透明度;当鼠标移出的时候反序恢复,先恢复透明度与,再恢复宽度最后恢复高度。最后一个li是同时运动,使得元素的高宽和透明度同时发生改变。为了实现同时改变引用了json。

json的格式是{a:b,c:d......}a和c代表元素,相当于object,b 和d代表数值,相当于iTarget。通过对json的for-in循环实现元素的同时运动。

json 的for-in循环的格式是for(var i in json){.....}其中i指的是 元素名,json[i]代表元素名对应的数值。

对于已经可以实现高宽运动的startmove函数,为了让元素通过startmove同时实现对透明度的改变需要对元素名进行判断,如果是opacity就特殊处理,否则正常处理。

对于元素的链式动画,需要对startmove的形参中多添加一个代表函数的形参。然后在清除定时器之前判断,如果有此实参传入就先清除定时器然后执行此函数。

对于元素的同时运动,将要同时执行的要求放入json中,然后通过for循环执行运动。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ani</title><style type="text/css">*{margin:0px;padding:0px;}ul{list-style: none;        }ul li{height:200px;width:200px;    border:4px solid #233;margin-bottom:20px;background: yellow;}#list2{filter: alpha(opacity:30);opacity: 0.3;}</style><script>window.onload=function(){//var list=document.getElementsByTagName("li");      var list0=document.getElementById("list0");      var list1=document.getElementById("list1");      var list2=document.getElementById("list2");      var list3=document.getElementById("list3");      var list4=document.getElementById("list4");/*for(var i=0;i<list.length;i++){ list[i].timer=null;list[i].=function(){startmove(this,400);}list[i].onmouseout=function(){startmove(this,200);}}*/    list0.onmouseover=function(){    startmove(this,"height",400);}    list0.onmouseout=function(){    startmove(this,"height",200);}    list1.onmouseover=function(){    startmove(this,"width",400);}    list1.onmouseout=function(){    startmove(this,"width",200);}    list2.onmouseover=function(){    startmove(this,"opacity",100);}    list2.onmouseout=function(){    startmove(this,"opacity",30);}    list3.onmouseover=function(){    startmove(list3,"height",400,function(){    startmove(list3,"width",400,function(){    startmove(list3,"opacity",30);    });    });}    list3.onmouseout=function(){    startmove(list3,"opacity",100,function(){    startmove(list3,"width",200,function(){    startmove(list3,"height",200);    });    });}    list4.onmouseover=function(){    startmove1(this,{height :400,width :400,opacity:30});}    list4.onmouseout=function(){    startmove1(this,{height :200,width :200,opacity:100});}function startmove1(obj,json,fn){var flag=true;     clearInterval(obj.timer);          obj.timer=setInterval(function(){     for(var i in json){     if(i=="opacity"){     var curr=Math.round(parseFloat(getStyle(obj,i))*100);     alert(curr);     }     else{     var curr=parseInt(getStyle(obj,i));}     var speed=(json[i]-curr)/8;     speed=speed>0?Math.ceil(speed):Math.floor(speed);     if(curr!=json[i]){     flag=false;}     if(i=="opacity"){     obj.style.filter="alpha(opacity:"+(curr+speed)+")";     obj.style.opacity=(curr+speed)/100;     }     else{            obj.style[i]=curr+speed+"px";}         if(flag){          clearInterval(obj.timer);        }        if(fn){         fn();         }}      },30);    }    function startmove(obj,arr,iTarge,fn){     clearInterval(obj.timer);          obj.timer=setInterval(function(){     if(arr=="opacity"){     var curr=Math.round(parseFloat(getStyle(obj,arr))*100);     alert(curr);     }     else{     var curr=parseInt(getStyle(obj,arr));}     var speed=(iTarge-curr)/8;     speed=speed>0?Math.ceil(speed):Math.floor(speed);     if(curr==iTarge){         clearInterval(obj.timer);         if(fn){         fn();         }     }     else{     if(arr=="opacity"){     obj.style.filter="alpha(opacity:"+(curr+speed)+")";     obj.style.opacity=(curr+speed)/100;     }     else{            obj.style[arr]=curr+speed+"px";} }     },30);    }    function getStyle(obj,arr){    if(obj.currentStyle){    //alert(obj.currentStyle[arr]);    return obj.currentStyle[arr];    }    else{    return getComputedStyle(obj,false)[arr];    }    }}</script></head><body><div><ul><li id="list0"></li><li id="list1"></li><li id="list2"></li><li id="list3"></li><li id="list4"></li></ul></div></body></html>

js动画