DDR爱好者之家

JavaScript变速动画函数封装添加任意多个属性
站长资源 2024/11/25 佚名
13 1538
DDR爱好者之家 Design By 杰米

下面通过实例代码给大家介绍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="/UploadFiles/2021-04-02/common.js">


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 "htmlcode">



//变速动画函数封装增加任意多个属性和回调函数及层级还有透明度
  //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 "目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
    }, 20)
  }





总结


以上所述是小编给大家介绍的JavaScript变速动画函数封装添加任意多个属性，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米