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;

    }

  • 相关阅读:
    JS实现双击内容变为可编辑状态
    DataTables 1.10.x与1.9.x参数名对照表
    div里 datapicker显示异常的情况之一
    javascript 添加行,删除行,datepicker获取当前日期和上一个月日期并设置格式,笔记
    jQuery 实现添加表格行,删除行,调用日期控件
    c# webbrowser控件内核版本强制修改
    【.net】获取网页CDM的下载链接的地址
    MySQL 密码增强插件
    跟我一起学extjs5(42--单个模块的数据新增方式)
    给 Android 开发人员的 RxJava 具体解释
  • 原文地址:https://www.cnblogs.com/lulublog/p/8525624.html
Copyright © 2011-2022 走看看