首页 > Web开发 > 详细

js运动框架

时间:2018-02-13 13:58:35      阅读:191      评论:0      收藏:0      [点我收藏+]

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

 

简洁版:包括链式运动,没有同时运动,不需要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运动框架

原文:https://www.cnblogs.com/iDouble/p/8446494.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!