Ausführliche Erläuterung von Beispielen für die Kapselung von Motion Frameworks in 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>

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für die Kapselung von Motion Frameworks in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!