zoukankan      html  css  js  c++  java
  • js中运动框架的封装

         //获取非行间样式的封装
    function setStyle(obj,name){
              // 考虑兼容性问题
    if(obj.currentStyle){//不兼容火狐和谷歌
    return obj.currentStyle[name];
    }else{
    return getComputedStyle(obj,false)[name];//不兼容IE
    }
    }
                function move(obj,json,complete) {
    // 用计时器前先清除,防止多次点击
    clearInterval(obj.timer);
    // 设置complete的默认值
    var complete=complete||{};//如果有就是用户传入的值,否则就是一个空对象
    complete.dur=complete.dur||2000;//时间:如果有就是用户传入的值,否则默认2000
    complete.easing=complete.easing||"linear";//运动方式:如果有就是用户传入的值,否则默认匀速
            //总步数=总时间÷计时器设定的时间
    var count = parseInt(complete.dur / 30);
          //起始位置,先定义一个json
    var start={};
          //总距离=传入的距离-起始距离
    var dis={};
    // 因为传入了多个起始目标和多个终点目标,所以先循环
    for(name in json){
    start[name]=parseFloat(setStyle(obj,name));
    dis[name]=json[name]-start[name];
    }
    // 每步运动的距离=总距离÷总步数
    // var spen = dis[name] / count;
    // 定义起始步数
    var n = 0;
    obj.timer = setInterval(function () {
    n++;
    for(name in json){
    var a=n/count;
    switch(complete.easing){//判断
    case "linear":
    var cur=start[name] + a * dis[name];//起始位置+当前运动的距离*总距离÷总步数,数学中先乘后除或先除后乘结果都一样
    break;
    case "ease-in":
    var cur=start[name] + Math.pow(a,3) * dis[name];
    break;
    case "ease-out":
    var a=1-n/count;
    var cur=start[name] +(1-Math.pow(a,3)) * dis[name];
    break;
    }
    // 把当前运动的位置保存

    // 判断属性是不是透明度,透明度不用加单位
    if(name=='opacity'){
    obj.style[name]=cur;
    // 兼容IE低版本,IE的透明度是1到100
    obj.style.filter='alpha('+cur*100+')';
    }else {
    obj.style[name] = cur + "px";
    }
    }

    // 判断运动是否完成
    if (n == count) {
    // 完成后清除定时器,停止运动
    clearInterval(obj.timer);
    // 判断用户是否传入回调函数
    complete.fn && complete.fn();
    }
    }, 30);
    }
         
  • 相关阅读:
    video全屏视频背景适配不同分辨率
    深入理解object.defineproperty()方法
    抓取之近似网页过滤
    基情四射的两个css样式
    Hadoop 2.4.1 登录认证配置小结
    Window中调试HBase问题小结
    改了改博客界面
    Hbase0.98.4/Hadoop2.4.1整合小结【原创】
    Hadoop 2.4.1 Map/Reduce小结【原创】
    hadoop的dfs工具类一个【原创】
  • 原文地址:https://www.cnblogs.com/DongZixin/p/7011122.html
Copyright © 2011-2022 走看看