码迷,mamicode.com
首页 > Web开发 > 详细

2015.8.2js-19(完美运动框架)

时间:2015-08-02 21:16:27      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:

 1 /*完美运动框架*/
 2 //1.先清除定时期,2,获取样式,如果是opacity则单独解决,3,定义速度,4,定义当前值是否到达目的地,5,判断当前值是否到达目的地,6运动基本,如果是opacity
 3 function startMove(obj,json,fnEnd){
 4     clearInterval(obj.timer);
 5     obj.timer = setInterval(function(){
 6         var bStop = true;        //假设所有的属性都达到目标值
 7         for(attr in json){       //多值运动以json形式来表式
 8             var cur = 0;
 9             if(attr == "opacity"){    //透明度特殊处理
10                 cur=Math.round(parseFloat(getStyle(obj, attr))*100);
11             }else{
12                 cur = parseInt(getStyle(obj,attr));
13             }
14 
15             var speed = (json[attr] - cur)/6;    //定义速度
16             speed = speed > 0? Math.ceil(speed):Math.floor(speed);    //缓冲运动取整
17 
18             if(cur != json[attr]){        //如果各值没有达到目标值,则继续运动
19                 bStop = false;
20             }
21             if(attr == "opacity"){        //透明度特殊处理
22                 obj.style.filter=‘alpha(opacity:‘+(cur+speed)+‘)‘;
23                 obj.style.opacity=(cur+speed)/100;
24             }else{
25                 obj.style[attr] = cur+speed + "px";
26             }
27         }
28         if(bStop){
29             clearInterval(obj.timer);      //如果各值达到目标值,则停止定时器
30             if(fnEnd){               //回调函数,链式运动
31                 fnEnd();
32             }
33         }
34     },Math.round(1000/60));
35 }

 

2015.8.2js-19(完美运动框架)

标签:

原文地址:http://www.cnblogs.com/alantao/p/4696601.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!