zoukankan      html  css  js  c++  java
  • 运动封装(支持缓冲 多物体 链式和完美)

    //obj 代表运动对象
    //json : 代表多个attr和target
    // callback 表示一个函数 (下一个动作) 当一个参数代表一个函数时,这个参数表示 回调函数
    // 支持 缓冲和多物体    支持透明度  支持链式运动  支持完美运动 解决完美运动 bug
    function startMove(obj,json,callback){
         clearInterval( obj.timer );
         obj.timer = setInterval( function(){
              var flag = true;  假设定时器为true时  可以停止定时器了
              //attr 就是要操作的样式
              //json[attr] 就是目标值
              for( var attr in json ){
                  var current = 0;
                  //获取元素的实际宽度
                  if( attr == "opacity" ){
                       current = getStyle( obj, attr )*100;
                  }else if( attr == "zIndex" ){
                       current = parseInt( getStyle(obj,attr) ) ;
                  }else{
                       current = parseInt( getStyle(obj,attr) ) ;
                  }             
                  var speed = (json[attr]-current)/10;
                  speed = speed>0?Math.ceil(speed) : Math.floor(speed);
                  if( current != json[attr] ){
                       //当操作的样式没有达到目标值时  不能停止定时器
                       flag = false;
                  }
                  //继续操作当前的样式值
                  if( attr == "opacity" ){
                       obj.style["opacity"] = (current+speed)/100;
                  }else if( attr == "zIndex" ){
                       obj.style[attr] = json[attr];
                  }else{
                       obj.style[attr] = current+speed + "px";
                  }
              }
              //当循环结束后 如果flag值还是true  假设成立
              if( flag ){
                  clearInterval( obj.timer );
                  //进入下一个动作(功能、方法 、函数)
                  //动作是可变的
                  //调用下一个动作
                  if( callback ){
                       callback();
                  }
              }
         },30 )
    }
    function getStyle(obj,attr){
         if( window.getComputedStyle ){
              return window.getComputedStyle( obj )[attr];
         }else{
              return obj.currentStyle[attr];
         }
    }
  • 相关阅读:
    什么是web标准??
    狗子哥虽然失业了,但是生活才刚刚开始啊
    ionic hidden scroll bar
    参数化查询 '(@ActualShipTime datetime' 需要参数 @AuthorizationNumber,但未提供该参数。
    C# 使用PrintDocument 绘制表格 完成 打印预览 DataTable
    Linq 中按照多个值进行分组(GroupBy)
    OpenXml SDK 2.0 创建Word文档 添加页、段落、页眉和页脚
    Linq to sql 消除列重复 去重复
    添加访问人数统计
    国内各大互联网公司相关技术站点2.0版 (集合腾讯、阿里、百度、搜狐、新浪、360等共49个)
  • 原文地址:https://www.cnblogs.com/tis100204/p/10297451.html
Copyright © 2011-2022 走看看