zoukankan      html  css  js  c++  java
  • 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格式

  • 相关阅读:
    WCF BasicHttpBinding 安全解析(2)BasicHttpBinding安全项
    WCF BasicHttpBinding 安全解析(4)windows验证(IIS宿主)
    网页优化系列三:使用压缩后置viewstate
    向IIS请求页面时,它做了什么?!(部分转载)
    使用Odbc链接mysql时parameter参数设置
    .net中close和dispose及关闭流操作
    asp.net 解码gb2312下urlencode后的字符串
    GridView实战一:自定义分页、排序、修改、插入、删除
    实现滑动分页(微博分页方式)
    javascript实例:逐条记录停顿的走马灯
  • 原文地址:https://www.cnblogs.com/iDouble/p/8446494.html
Copyright © 2011-2022 走看看