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


Posted in Javascript onApril 03, 2019

下面通过实例代码给大家介绍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变速动画函数封装添加任意多个属性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery中的on方法使用介绍
Dec 29 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
JS中注入eval, Function等系统函数截获动态代码
Apr 03 #Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 #Javascript
elementUI多选框反选的实现代码
Apr 03 #Javascript
vue生命周期的探索
Apr 03 #Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 #Javascript
详释JavaScript执行环境与执行栈
Apr 02 #Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 #Javascript
You might like
如何写php守护进程(Daemon)
2015/12/30 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
彻底搞懂Python字符编码
2018/01/23 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python实现按行分割文件
2019/07/22 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
便利店投资的创业计划书
2014/01/12 职场文书
大二学习计划书范文
2014/04/27 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
大学生村官个人总结
2015/02/15 职场文书
欠条样本
2015/07/03 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL