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);
    }
         
  • 相关阅读:
    vue.js小结
    前端js
    前端HTML页面签入微信和APP小结
    angualr引入bootstrap部分效果失效。
    .net面试问到的问题
    C#网页爬虫抓取行政区划
    mysql 更新一个字段(在他的后面添加字符串)
    关于asp.net C# 导出Excel文件 打开Excel文件格式与扩展名指定格式不一致的解决办法
    动态生成GridView列
    MSDN_FieldInfo.SetValue
  • 原文地址:https://www.cnblogs.com/DongZixin/p/7011122.html
Copyright © 2011-2022 走看看