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

站长资源 2025/11/4 佚名

13 1538 13

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变速动画函数封装添加任意多个属性，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

js,变速动画函数,js,变速函数

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

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

暂无评论...

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2025年11月04日

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

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

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

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接