JS运动框架

  1 /**
  2  * 使用offsetLeft,需注意margin的使用
  3  * offsetLeft = margin-left + left;
  4  * offsetWidth= padding + border + width;
  5  * 
  6  * @author Lonve
  7  */
  8 function getStyle(elem,attr){
  9     var result = null;
 10     result = elem.currentStyle?elem.currentStyle[attr]:getComputedStyle(elem,false)[attr];
 11     if(attr=="opacity"){
 12         return parseInt(parseFloat(result)*100);
 13     }
 14     return parseInt(result);
 15 }
 16 
 17 
 18 var timer = null;
 19 //匀速运动停止条件--->距离足够近
 20 function offsetMove1(offset){
 21     var oDiv = document.getElementById("oDiv");
 22     var speed = 0;
 23     speed = oDiv.offsetLeft < offset?10:-10;
 24     
 25     clearInterval(timer);
 26     timer = setInterval(function(){
 27         if(oDiv.offsetLeft >= offset){ //Math.abs(oDiv.offsetLeft - offset)<speed;
 28             clearInterval(timer);
 29         }else{
 30             oDiv.style.left = oDiv.offsetLeft + speed + "px";
 31         }
 32     },30)
 33 }
 34 
 35 //缓动运动条件 1.变化的运动速度,最后速度为零
 36 //问题:offsetLeft
 37 function offsetMove2(elem,offset){
 38     clearInterval(elem.timer);
 39     var speed = 0;
 40     elem.timer = setInterval(function(){
 41         speed = (offset - elem.offsetLeft)/8;
 42         speed = speed>0?Math.ceil(speed):Math.floor(speed);
 43         
 44         //是否到达到目标点
 45         if(elem.offsetLeft == offset){
 46             clearInterval(elem.timer);
 47         }else{
 48             elem.style.left = elem.offsetLeft + speed + "px";
 49         }
 50     },30)
 51 }
 52 
 53 //任意属性值
 54 //避免小数值    parseInt(0.3*100)
 55 function offsetMove3(elem,attr,offset){
 56     clearInterval(elem.timer);
 57     elem.timer = setInterval(function(){
 58         var curAttr = getStyle(elem,attr);            //当前属性值
 59         var speed = (offset - curAttr)/8;            //当前速度
 60         speed = speed>0?Math.ceil(speed):Math.floor(speed);
 61         
 62         if(offset == curAttr){
 63             clearInterval(elem.timer);
 64         }else{
 65             if(attr=="opacity"){
 66                 elem.style.filter = "alpha(opacity="+(curAttr +speed)+")";
 67                 elem.style.opacity= (curAttr + speed)/100;
 68             }else{
 69                 elem.style[attr] = (curAttr + speed) + "px";
 70             }
 71         }
 72     },30)
 73 }
 74 
 75 //链式运动
 76 function offsetMove4(elem,attr,offset,fn){
 77     clearInterval(elem.timer);
 78     elem.timer = setInterval(function(){
 79         var curAttr = getStyle(elem,attr);
 80         var speed   = (offset - curAttr)/8;
 81         speed = speed > 0? Math.ceil(speed):Math.floor(speed);
 82         
 83         if(offset == curAttr){
 84             clearInterval(elem.timer);
 85             if(fn){ fn(); }
 86         }else{
 87             if(attr=="opacity"){
 88                 elem.style.filter = "alpha(opacity:"+(curAttr+speed)+")";
 89                 elem.style.opacity= (curAttr+speed)/100;
 90             }else{
 91                 elem.style[attr] = curAttr + speed + "px";
 92             }
 93         }
 94     },30)
 95 }
 96 
 97 //多个属性同时变化
 98 function offsetMove5(elem,json,fn){
 99     var isStop = true;            //所有值都到达
100     clearInterval(elem.timer);
101     elem.timer = setInterval(function(){
102         //历遍json属性
103         for(var attr in json){
104             //1.取当前与速度
105             var offset  = json[attr];
106             var curAttr = getStyle(elem,attr);
107             var speed   = (offset - curAttr)/8;
108             speed = speed > 0? Math.ceil(speed):Math.floor(speed);
109             
110             //2.检测停止
111             if(offset!=curAttr){
112                 isStop = false;
113             }
114             if(attr=="opacity"){
115                 elem.style.filter = "alpha(opacity:"+(curAttr+speed)+")";
116                 elem.style.opacity= (curAttr+speed)/100;
117             }else{
118                 elem.style[attr] = curAttr + speed + "px";
119             }
120         }
121         //所有值都到达目标值,则停止
122         if(isStop){
123             clearInterval(elem.timer);
124             if(fn){ fn(); }
125         }
126     },30);
127 }