您好,欢迎访问一九零五行业门户网

js中运动框架封装的实例详解

//获取非行间样式的封装
        function setstyle(obj,name){
// 考虑兼容性问题
               if(obj.currentstyle){//不兼容火狐和谷歌
                   return obj.currentstyle[name];
               }else{
                   return getcomputedstyle(obj,false)[name];//不兼容ie
               }
           }
function move(obj,json,complete) {
//             用计时器前先清除,防止多次点击
              clearinterval(obj.timer);
//             设置complete的默认值
              var complete=complete||{};//如果有就是用户传入的值,否则就是一个空对象
              complete.dur=complete.dur||2000;//时间:如果有就是用户传入的值,否则默认2000
              complete.easing=complete.easing||linear;//运动方式:如果有就是用户传入的值,否则默认匀速
//总步数=总时间÷计时器设定的时间
           var count = parseint(complete.dur / 30);
//起始位置,先定义一个json
           var start={};
//总距离=传入的距离-起始距离
           var dis={};
//          因为传入了多个起始目标和多个终点目标,所以先循环
           for(name in json){
              start[name]=parsefloat(setstyle(obj,name));
              dis[name]=json[name]-start[name];
           }
//                每步运动的距离=总距离÷总步数
//          var spen = dis[name] / count;
//                    定义起始步数
           var n = 0;
           obj.timer = setinterval(function () {
               n++;
           for(name in json){
              var a=n/count;
              switch(complete.easing){//判断
                 case linear:
                 var cur=start[name] + a * dis[name];//起始位置+当前运动的距离*总距离÷总步数,数学中先乘后除或先除后乘结果都一样
                 break;
                 case ease-in:
                 var cur=start[name] + math.pow(a,3) * dis[name];
                 break;
                 case ease-out:
                 var a=1-n/count;
                 var cur=start[name] +(1-math.pow(a,3)) * dis[name];
                 break;
              }
//                 把当前运动的位置保存
//                判断属性是不是透明度,透明度不用加单位
                  if(name=='opacity'){
                      obj.style[name]=cur;
//                    兼容ie低版本,ie的透明度是1到100
                      obj.style.filter='alpha('+cur*100+')';
                  }else {
                      obj.style[name] = cur + px;
                  }
           }
//                判断运动是否完成
               if (n == count) {
//                    完成后清除定时器,停止运动
                   clearinterval(obj.timer);
//                    判断用户是否传入回调函数
                   complete.fn && complete.fn();
               }
           }, 30);
       }

以上就是js中运动框架封装的实例详解的详细内容。
其它类似信息

推荐信息