js运动框架

Posted 决起而飞

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js运动框架相关的知识,希望对你有一定的参考价值。

最近写个运动框架,确实好用,来附上,具体就不说了,注释比较详细

 

简洁版:包括链式运动,没有同时运动,不需要json格式

        //获取非行间样式
        function getStyle(obj,attr){
             if(obj.currentStyle){
                   return obj.currentStyle[attr]
             }
             else{
                   return getComputedStyle(obj,false)[attr]
             }
        }

        //startMove运动函数 fn为链式运动
        function startMove(obj,attr,target,fn){

                clearInterval(obj.timer)
                obj.timer=setInterval(function(){
                       var getCur=0
                       if(attr==‘opacity‘){        //兼容透明度
                          getCur=Math.round(parseFloat(getStyle(obj,attr))*100)
                       }
                       else{
                             getCur=parseInt(getStyle(obj,attr))
                       }
                       var speed=(target-getCur)/8 //缓动运动
                       speed=speed>0?Math.ceil(speed):Math.floor(speed)
                       if(getCur==target){
                               clearInterval(obj.timer)
                                if(fn){
                                     fn.call(obj)      //回调函数作用域指向obj
                                }
                       }else{
                               if(attr==‘opacity‘){
                                   obj.style.filter=‘alpha(opacity:‘+(getCur+speed)+‘)‘
                                   obj.style.opacity=(getCur+speed)/100
                               }else{
                                   obj.style[attr]=getCur+speed+‘px‘
                               }
                       }
                },30)
        }

 

完整版:包括链式运动、同时运动,涉及到同时运动则需要利用json辅助完成

        //获取非行间样式
        function getStyle(obj,attr){
             if(obj.currentStyle){
                  return obj.currentStyle[attr]
             }
             else{
                  return getComputedStyle(obj,false)[attr]
             }
        }

        //startMove运动函数 fn为链式运动  json for in 循环
        function startMove(obj,json,fn){
                clearInterval(obj.timer)
                obj.timer=setInterval(function(){
                    var flag=true                  //设置一个标签
                    for(var attr in json){
                       var getCur=0
                       if(attr==‘opacity‘){        //兼容透明度
                          getCur=Math.round(parseFloat(getStyle(obj,attr))*100)
                       }
                       else{
                             getCur=parseInt(getStyle(obj,attr))
                       }
                       var speed=(json[attr]-getCur)/8 //缓动运动
                        speed=speed>0?Math.ceil(speed):Math.floor(speed)

                       if(getCur!=json[attr]){     //判断标签  要的是最后的值
                               flag=false
                       }
                            if(attr==‘opacity‘){
                                 obj.style.filter=‘alpha(opacity:‘+(getCur+speed)+‘)‘
                                 obj.style.opacity=(getCur+speed)/100
                            }else{
                                 obj.style[attr]=getCur+speed+‘px‘
                            }
                  }
                 if(flag){                       //判断标签   设置在for in外面意思是for in到全部的attr才执行接下操作        
                           clearInterval(obj.timer)
                          if(fn){
                               fn.call(obj)      //回调函数作用域指向obj
                          }
                       }
                },30)
        }

需要注意的几点

获取非行间样式,注意浏览器的兼容问题

常用的Math方法、parseInt等的转换

回调函数,作用域的问题

json格式

以上是关于js运动框架的主要内容,如果未能解决你的问题,请参考以下文章

带无缝滚动的轮播图(含JS运动框架)

带无缝滚动的轮播图(含JS运动框架)-简洁版

JS之链式运动,及任意值运动框架,包括透明度的改变

HTML+JavaScript实现链式运动特效

js运动框架完成块的宽高透明度及颜色的渐变

js运动框架逐渐递进版