JavaScript变速动画函数封装添加任意多个属性
程序员文章站
2023-02-07 11:26:24
下面通过实例代码给大家介绍javascript变速动画函数封装添加任意多个属性 ,具体代码如下所示:
下面通过实例代码给大家介绍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变速动画函数封装添加任意多个属性,希望对大家有所帮助
上一篇: IOS中内存管理那些事
推荐阅读
-
JS---封装缓动(变速)动画函数---增加任意一个属性
-
JS---封装缓动(变速)动画函数---增加多个任意多个属性
-
JS---封装缓动(变速)动画函数---增加任意多个属性&增加回调函数
-
JS---最终版本--封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度
-
JavaScript变速动画函数封装添加任意多个属性
-
JS---最终版本--封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度
-
JS---封装缓动(变速)动画函数---增加多个任意多个属性
-
JS---封装缓动(变速)动画函数---增加任意多个属性&增加回调函数
-
JavaScript变速动画函数封装添加任意多个属性
-
JS---封装缓动(变速)动画函数---增加任意一个属性