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

2024-05-06 15:41:07

字体：大中小

来源：转载

供稿：网友

下面通过实例代码给大家介绍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;    }  }};

上一篇：vue框架下部署上线后刷新报404问题的解决方案(推荐)

下一篇：JS中注入eval, Function等系统函数截获动态代码