zoukankan      html  css  js  c++  java
  • 完美的js运动框架

    //完美运动框架, 对象,json,函数
    function move(obj,json,funEnd){
    clearInterval(obj.timer);//清除定时器
    obj.timer= setInterval(function(){//同时开好几个对象定时器
    //声明一个变量,看下JSON中的属性点是已经达到==目标点是都已经完成
    var flag=true;//设置一个初始值假设全部的属性都已经执行了完了
    for(var attr in json){//使用for 循环,引出json中的各个目标点
    var currentAttr=0;//声明一个变量,主要存储原始点
    if(attr=="opacity"){//如果 属性==opacity,要另行考虑
    //为了确保得到的数字是整数,所以使用Math.round,后面是转义,*100是因为opacity的值为小数
    currentAttr=Math.round(parseFloat(getStyle(obj,attr))*100);
    }
    else {
    currentAttr=parseInt(getStyle(obj,attr)); //正常情况下的转义并赋值

    }
    var speed=(json[attr]-currentAttr)/10; //声明变量,获取速度 速度=(目标点-原始点)/number

    speed=speed>0?Math.ceil(speed):Math.floor(speed); //进行速度的取整 Math.ceil 向上取整 Math.floor 向下取整

    if(json[attr]!=currentAttr)//如果 原始点!=目标点 ,不停止运动
    {
    flag=false;

    }
    // if(json[attr]==currentAttr){
    // clearInterval(obj.timer);
    // if(funEnd)funEnd();
    // // if(funEnd){
    // // funEnd();
    // // }
    // }

    // else {
    if(attr=="opacity"){//如果 目标点==opacity
    // currentAttr+=speed;
    obj.style.opacity=(currentAttr+speed)/100; //使用下面的代码求出 opacity
    obj.style.filter='alpha(opacity:'+(currentAttr+speed)+')';
    }
    else {//使用下面的代码求出 [attr]也就是目标点的属性!
    obj.style[attr]=currentAttr+speed+"px";

    }

    // }
    } //当所有的运动都完成后,关闭定时器,若有函数,执行函数!
    if(flag){//全部的属性已经执行
    clearInterval(obj.timer);
    if(funEnd)funEnd();

    }
    },30)
    }

    //获取非行间的属性,下面主要是为了兼容各个浏览器
    function getStyle(obj,name){

    if(obj.currentStyle){
    return obj.currentStyle[name];
    }
    else {
    return getComputedStyle(obj,false)[name];
    }
    }

    function getClass(oParent,className){
    var ele=oParent.getElementsByTagName("*");
    var arr=[];
    for(var i=0;i<ele.length;i++){
    if(ele[i].className==className){
    arr.push(ele[i]);
    }
    }
    return arr;

    }

  • 相关阅读:
    GitHub入门之一:使用github下载项目
    Android Fragment 真正的完全解析(下)
    Android Fragment 真正的完全解析(上)
    c# 发送邮件
    SmartThreadPool
    虚拟机
    相关系数
    为枚举类型添加说明 zt
    MD5
    hashcode
  • 原文地址:https://www.cnblogs.com/lulublog/p/8525624.html
Copyright © 2011-2022 走看看