js动画效果总结

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动画函数封装--缓冲运动 
  基本结构和上面单物体结构相同

js动画效果总结

js动画函数封装--单物体运动

js动画函数封装--多物体运动

js动画函数封装--缓冲运动

你可能感兴趣的:(js动画效果总结)