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

时间：2021-05-26

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章