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 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 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
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
报纸媒体创意广告词
2014/03/17 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
小学生操行评语
2014/04/22 职场文书
中学生操行评语大全
2014/04/24 职场文书
初中新生军训方案
2014/05/13 职场文书
模具专业求职信
2014/06/26 职场文书
整改报告怎么写
2014/11/06 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书