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

<span style="font-size: 18px;">　　　　　//获取非行间样式的封装</span><br><span style="font-size: 18px;">         function setStyle(obj,name){</span><br><span style="font-size: 18px;">　　　　　　　　　　// 考虑兼容性问题</span><br><span style="font-size: 18px;">                if(obj.currentStyle){//不兼容火狐和谷歌</span><br><span style="font-size: 18px;">                    return obj.currentStyle[name];</span><br><span style="font-size: 18px;">                }else{</span><br><span style="font-size: 18px;">                    return getComputedStyle(obj,false)[name];//不兼容IE</span><br><span style="font-size: 18px;">                }</span><br><span style="font-size: 18px;">            }</span>

<span style="font-size: 18px;">            function move(obj,json,complete) {</span><br><span style="font-size: 18px;">//             用计时器前先清除,防止多次点击</span><br><span style="font-size: 18px;">               clearInterval(obj.timer);</span><br><span style="font-size: 18px;">//             设置complete的默认值</span><br><span style="font-size: 18px;">               var complete=complete||{};//如果有就是用户传入的值,否则就是一个空对象</span><br><span style="font-size: 18px;">               complete.dur=complete.dur||2000;//时间:如果有就是用户传入的值,否则默认2000</span><br><span style="font-size: 18px;">               complete.easing=complete.easing||"linear";//运动方式:如果有就是用户传入的值,否则默认匀速</span><br><span style="font-size: 18px;">　　　　　　　　//总步数=总时间÷计时器设定的时间</span><br><span style="font-size: 18px;">            var count = parseInt(complete.dur / 30);</span><br><span style="font-size: 18px;">　　　　　　//起始位置,先定义一个json</span><br><span style="font-size: 18px;">            var start={};</span><br><span style="font-size: 18px;">　　　　　　//总距离=传入的距离-起始距离</span><br><span style="font-size: 18px;">            var dis={};</span><br><span style="font-size: 18px;">//          因为传入了多个起始目标和多个终点目标,所以先循环</span><br><span style="font-size: 18px;">            for(name in json){</span><br><span style="font-size: 18px;">               start[name]=parseFloat(setStyle(obj,name));</span><br><span style="font-size: 18px;">               dis[name]=json[name]-start[name];</span><br><span style="font-size: 18px;">            }</span><br><span style="font-size: 18px;">//                每步运动的距离=总距离÷总步数</span><br><span style="font-size: 18px;">//          var spen = dis[name] / count;</span><br><span style="font-size: 18px;">//                    定义起始步数</span><br><span style="font-size: 18px;">            var n = 0;</span><br><span style="font-size: 18px;">            obj.timer = setInterval(function () {</span><br><span style="font-size: 18px;">                n++;</span><br><span style="font-size: 18px;">            for(name in json){</span><br><span style="font-size: 18px;">               var a=n/count;</span><br><span style="font-size: 18px;">               switch(complete.easing){//判断</span><br><span style="font-size: 18px;">                  case "linear":</span><br><span style="font-size: 18px;">                  var cur=start[name] + a * dis[name];//起始位置+当前运动的距离*总距离÷总步数,数学中先乘后除或先除后乘结果都一样</span><br><span style="font-size: 18px;">                  break;</span><br><span style="font-size: 18px;">                  case "ease-in":</span><br><span style="font-size: 18px;">                  var cur=start[name] + Math.pow(a,3) * dis[name];</span><br><span style="font-size: 18px;">                  break;</span><br><span style="font-size: 18px;">                  case "ease-out":</span><br><span style="font-size: 18px;">                  var a=1-n/count;</span><br><span style="font-size: 18px;">                  var cur=start[name] +(1-Math.pow(a,3)) * dis[name];</span><br><span style="font-size: 18px;">                  break;</span><br><span style="font-size: 18px;">               }</span><br><span style="font-size: 18px;">//                 把当前运动的位置保存</span><br><br><span style="font-size: 18px;">//                判断属性是不是透明度,透明度不用加单位</span><br><span style="font-size: 18px;">                   if(name=='opacity'){</span><br><span style="font-size: 18px;">                       obj.style[name]=cur;</span><br><span style="font-size: 18px;">//                    兼容IE低版本,IE的透明度是1到100</span><br><span style="font-size: 18px;">                       obj.style.filter='alpha('+cur*100+')';</span><br><span style="font-size: 18px;">                   }else {</span><br><span style="font-size: 18px;">                       obj.style[name] = cur + "px";</span><br><span style="font-size: 18px;">                   }</span><br><span style="font-size: 18px;">            }</span><br><br><span style="font-size: 18px;">//                判断运动是否完成</span><br><span style="font-size: 18px;">                if (n == count) {</span><br><span style="font-size: 18px;">//                    完成后清除定时器,停止运动</span><br><span style="font-size: 18px;">                    clearInterval(obj.timer);</span><br><span style="font-size: 18px;">//                    判断用户是否传入回调函数</span><br><span style="font-size: 18px;">                    complete.fn && complete.fn();</span><br><span style="font-size: 18px;">                }</span><br><span style="font-size: 18px;">            }, 30);</span><br><span style="font-size: 18px;">        }</span><br><span style="font-size: 18px;">　　　　　</span><br>

以上是js中运动框架封装的实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！