JavaScript变速动画函数封装添加任意多个属性

程序员文章站 2022-05-27 09:07:43

下面通过实例代码给大家介绍javascript变速动画函数封装添加任意多个属性，具体代码如下所示：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    div {
      width: 200px;
      height: 100px;
      background-color: pink;
      position: absolute;
    }
  </style>
</head>
<body>
<input type="button" id="bt" value="显示效果"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //点击按钮，使元素的宽度到达一个值，高度到达一个值
  //获取任意元素的任意属性值
  function getstyle(element, attr) {
    //判断浏览器是否支持这个方法
    return window.getcomputedstyle ? window.getcomputedstyle(element, null)[attr] : element.currentstyle[attr] || 0;
  }
  //使任意元素，改变多个值的大小
  function animate(element, json) {
    //清理定时器
    clearinterval(element.timeid);
    //创建定时器
    element.timeid = setinterval(function () {
      //默认全部到达目标
      var flag = true;
      //循环遍历要改变的属性和值
      for (var attr in json) {
        //过去该属性的当前的值
        var current = parseint(getstyle(element, attr));
        //当前属性对应的目标值
        var target = json[attr];
        //移动的步数
        var step = (target - current) / 10;
        step = step > 0 ? math.ceil(step) : math.floor(step);
        current += step;//移动后的值
        element.style[attr] = current + "px";
        if (current != target) {
          flag = false;
        }
      }
      if (flag) {
        //清理定时器
        clearinterval(element.timeid);
      }
      //测试代码
      console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
    }, 20)
  }
  my$("bt").onclick = function () {
    animate(my$("dv"), {"width": 300, "left": 100, "top": 50});
  };
</script>
</body>
</html>

common.js:

/**
 * created by administrator on 2018/8/18.
 */
/**
 * created by administrator on 2016/7/27.
 */
/**
 * created by administrator on 2016/7/21.
 *
 * 次文件来自 很牛x的程序员 .
 *
 * 作者:无名
 */
/*
 * 该函数是返回的是指定格式的日期,是字符串类型
 * 参数:date ----日期
 * 返回值: 字符串类型的日期
 * */
function getdatetostring(date) {
  var strdate;//存储日期的字符串
  //获取年
  var year = date.getfullyear();
  //获取月
  var month = date.getmonth() + 1;
  //获取日
  var day = date.getdate();
  //获取小时
  var hour = date.gethours();
  //获取分钟
  var minute = date.getminutes();
  //获取秒
  var second = date.getseconds();
  hour = hour < 10 ? "0" + hour : hour;
  minute = minute < 10 ? "0" + minute : minute;
  second = second < 10 ? "0" + second : second;
  //拼接
  strdate = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;//隐藏问题,关于变量声明的位置
  return strdate;
}
//根据id获取元素对象
function my$(id) {
  return document.getelementbyid(id);
}
/*
 *
 * innertext属性ie中支持
 * textcontent火狐中支持
 * dvobj.innertext="您好";设置innertext的值
 * console.log(dvobj.innertext);获取innertext的值
 * 因为上述原因,inertext有时候需要设置值，有时候需要获取值
 * 所以,需要写一个兼容的代码能在火狐中使用,也可以在ie中使用
 *
 *
 * */
/*
 *设置innertext属性的值
 * element-----为某个元素设置属性值
 * content-----设置的值
 * */
function setinnertext(element, content) {
  if (typeof element.textcontent === "undefined") {
    //ie浏览器
    element.innertext = content;
  } else {
    element.textcontent = content;
  }
}
/*
 * 获取innertext属性的值
 * element 要获取的元素
 * 返回的是该元素的innertext值
 * */
function getinnertext(element) {
  if (typeof element.textcontent === "undefined") {
    //ie浏览器
    return element.innertext;
  } else {
    return element.textcontent;
  }
}
//获取当前元素前一个元素
function getpreviouselement(element) {
  if (element.previouselementsibling) {
    return element.previouselementsibling;
  } else {
    var ele = element.previoussibling;
    while (ele && ele.nodetype !== 1) {
      ele = ele.previoussibling;
    }
    return ele;
  }
}
//获取当前元素的后一个元素
function getnextelement(element) {
  if (element.nextelementsibling) {
    return element.nextelementsibling;
  } else {
    var ele = element.nextsibling;
    while (ele && ele.nodetype !== 1) {
      ele = ele.nextsibling;
    }
    return ele;
  }
}
//获取父元素中的第一个元素
function getfirstelementbyparent(parent) {
  if (parent.firstelementchild) {
    return parent.firstelementchild;
  } else {
    var ele = parent.firstchild;
    while (ele && ele.nodetype !== 1) {
      ele = ele.nextsibling;
    }
    return ele;
  }
}
//获取父元素中的最后一个元素
function getlastelementbyparent(parent) {
  if (parent.lastelementchild) {
    return parent.lastelementchild;
  } else {
    var ele = parent.lastchild;
    while (ele && ele.nodetype !== 1) {
      ele = ele.previoussibling;
    }
    return ele;
  }
}
//获取兄弟元素
function getsiblings(ele) {
  if (!ele)return;//判断当前的ele这个元素是否存在
  var elements = [];//定义数组的目的就是存储当前这个元素的所有的兄弟元素
  var el = ele.previoussibling;//当前元素的前一个节点
  while (el) {
    if (el.nodetype === 1) {//元素
      elements.push(el);//加到数组中
    }
    el = el.previoussibling;
  }
  el = ele.nextsibling;
  while (el) {
    if (el.nodetype === 1) {
      elements.push(el);
    }
    el = el.nextsibling;
  }
  return elements;
}
//  //能力检测多个浏览器为同一个对象注册多个事件
var eventtools = {
  //为对象添加注册事件
  addeventlistener: function (element, eventname, listener) {
    if (element.addeventlistener) {
      element.addeventlistener(eventname, listener, false);
    } else if (element.attachevent) {
      element.attachevent("on" + eventname, listener)
    } else {
      element["on" + eventname] = listener;
    }
  },
  //为对象移除事件
  removeeventlistener: function (element, eventname, listener) {
    if (element.removeeventlistener) {
      element.removeeventlistener(eventname, listener, false);
    } else if (element.detachevent) {
      element.detachevent("on" + eventname, listener);
    } else {
      element["on" + eventname] = null;
    }
  },
  //获取参数e
  getevent: function (e) {
    return e || window.event;
  },
  getpagex: function (e) {
    if (e.pagex) {
      return e.pagex;
    } else {
      //有的浏览器把高度设计在了文档的第一个元素中了
      //有的浏览器把高度设计在了body中了
      //document.documentelement.scrolltop;//文档的第一个元素
      //document.body.scrolltop;
      var scrollleft = document.documentelement.scrollleft || document.body.scrollleft;
      return e.clientx + scrollleft;
    }
  },
  getpagey: function (e) {
    if (e.pagey) {
      return e.pagey;
    } else {
      var scrolltop = document.documentelement.scrolltop || document.body.scrolltop;
      return e.clienty + scrolltop;
    }
  }
};

补充：js 变速动画函数

//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
  function getstyle(element, attr) {
    return window.getcomputedstyle ? window.getcomputedstyle(element, null)[attr] : element.currentstyle[attr] || 0;
  }

//变速动画函数封装增加任意多个属性和回调函数及层级还有透明度
  //element元素 json对象 存储属性与值 fn为回调函数
  function animate(element, json, fn) {
    //清理定时器
    clearinterval(element.timeid);
    //设置定时器
    element.timeid = setinterval(function () {
      //假设全部到达目标
      var f = true;
      //循环去获取传入的数据
      for (var i in json) {
        //判断传入的值 是不是opacity
        if (i == 'opacity') {
          //获取当前opacity的值 并且放大100倍
          var current = getstyle(element, i) * 100;
          //把目标值也放大100倍
          var target = json[i] * 100;
          //移动的步数
          var step = (target - current) / 10;
          //判断是不是为0
          step = step > 0 ? math.ceil(step) : math.floor(step);
          //移动后的位置
          current += step;
          //移动元素属性
          element.style[i] = current / 100;
          //判断属性是不是zindex
        } else if (i == 'zindex') {
          //直接设置zindex
          element.style[i] = json[i];
        } else {
          //普通属性获取（转化成数字）
          var current = parseint(getstyle(element, i));
          //目标属性值
          var target = json[i]
          //移动的步骤（渐变）
          var step = (target - current) / 10;
          //判断移动的值取整
          step = step > 0 ? math.ceil(step) : math.floor(step);
          //移动后的位置
          current += step;
          //移动元素
          element.style[i] = current + 'px';
        }
        //只要有一个没达到目标就设置f为false
        if (current != target) {
          f = false;
        }
        //目标到达 清理定时器 判断有没有回调函数
        if (f) {
          clearinterval(element.timeid);
          if (fn) {
            fn();
          }
        }
      }
      console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
    }, 20)
  }

总结

以上所述是小编给大家介绍的javascript变速动画函数封装添加任意多个属性，希望对大家有所帮助

上一篇： PS怎么设计水晶冰山? ps珠宝的设计方法

下一篇： jQuery分组选择器简单用法示例

JavaScript变速动画函数封装添加任意多个属性

JS---封装缓动（变速）动画函数---增加任意一个属性

JS---封装缓动（变速）动画函数---增加多个任意多个属性

JS---封装缓动（变速）动画函数---增加任意多个属性&增加回调函数

JS---最终版本--封装缓动（变速）动画函数---增加任意多个属性&回调函数&层级&透明度

JavaScript变速动画函数封装添加任意多个属性

JS---最终版本--封装缓动（变速）动画函数---增加任意多个属性&回调函数&层级&透明度

JS---封装缓动（变速）动画函数---增加多个任意多个属性

JS---封装缓动（变速）动画函数---增加任意多个属性&增加回调函数

JavaScript变速动画函数封装添加任意多个属性

JS---封装缓动（变速）动画函数---增加任意一个属性