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 select控制插件
Aug 17 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
微信小程序自动客服功能
Nov 02 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
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
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
python清理子进程机制剖析
2017/11/23 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
python中提高pip install速度
2020/02/14 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
优秀毕业生推荐信
2013/11/02 职场文书
数控专业大学生的自我鉴定
2013/11/13 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
公司总经理岗位职责
2014/03/15 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
部门2014年度工作总结
2014/11/12 职场文书
团代会邀请函
2015/02/02 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
企业法律事务工作总结
2015/08/11 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis