下面通過實(shí)例代碼給大家介紹JavaScript變速動(dòng)畫函數(shù)封裝添加任意多個(gè)屬性 ，具體代碼如下所示：
<!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> //點(diǎn)擊按鈕，使元素的寬度到達(dá)一個(gè)值，高度到達(dá)一個(gè)值 //獲取任意元素的任意屬性值 function getStyle(element, attr) { //判斷瀏覽器是否支持這個(gè)方法 return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } //使任意元素，改變多個(gè)值的大小 function animate(element, json) { //清理定時(shí)器 clearInterval(element.timeId); //創(chuàng)建定時(shí)器 element.timeId = setInterval(function () { //默認(rèn)全部到達(dá)目標(biāo) var flag = true; //循環(huán)遍歷要改變的屬性和值 for (var attr in json) { //過去該屬性的當(dāng)前的值 var current = parseInt(getStyle(element, attr)); //當(dāng)前屬性對(duì)應(yīng)的目標(biāo)值 var target = json[attr]; //移動(dòng)的步數(shù) var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移動(dòng)后的值 element.style[attr] = current + "px"; if (current != target) { flag = false; } } if (flag) { //清理定時(shí)器 clearInterval(element.timeId); } //測試代碼 console.log("目標(biāo):" + target + ",當(dāng)前:" + current + ",每次的移動(dòng)步數(shù):" + 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的程序員 . * * 作者:無名 *//* * 該函數(shù)是返回的是指定格式的日期,是字符串類型 * 參數(shù):date ----日期 * 返回值: 字符串類型的日期 * */function getDatetoString(date) { var strDate;//存儲(chǔ)日期的字符串 //獲取年 var year = date.getFullYear(); //獲取月 var month = date.getMonth() + 1; //獲取日 var day = date.getDate(); //獲取小時(shí) 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;//隱藏問題,關(guān)于變量聲明的位置 return strDate;}//根據(jù)id獲取元素對(duì)象function my$(id) { return document.getElementById(id);}/* * * innerText屬性IE中支持 * textContent火狐中支持 * dvObj.innerText="您好";設(shè)置innerText的值 * console.log(dvObj.innerText);獲取innerText的值 * 因?yàn)樯鲜鲈?inerText有時(shí)候需要設(shè)置值，有時(shí)候需要獲取值 * 所以,需要寫一個(gè)兼容的代碼能在火狐中使用,也可以在IE中使用 * * * *//* *設(shè)置innerText屬性的值 * element-----為某個(gè)元素設(shè)置屬性值 * content-----設(shè)置的值 * */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; }}//獲取當(dāng)前元素前一個(gè)元素function getPreviousElement(element) { if (element.previousElementSibling) { return element.previousElementSibling; } else { var ele = element.previousSibling; while (ele && ele.nodeType !== 1) { ele = ele.previousSibling; } return ele; }}//獲取當(dāng)前元素的后一個(gè)元素function getNextElement(element) { if (element.nextElementSibling) { return element.nextElementSibling; } else { var ele = element.nextSibling; while (ele && ele.nodeType !== 1) { ele = ele.nextSibling; } return ele; }}//獲取父元素中的第一個(gè)元素function getFirstElementByParent(parent) { if (parent.firstElementChild) { return parent.firstElementChild; } else { var ele = parent.firstChild; while (ele && ele.nodeType !== 1) { ele = ele.nextSibling; } return ele; }}//獲取父元素中的最后一個(gè)元素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;//判斷當(dāng)前的ele這個(gè)元素是否存在 var elements = [];//定義數(shù)組的目的就是存儲(chǔ)當(dāng)前這個(gè)元素的所有的兄弟元素 var el = ele.previousSibling;//當(dāng)前元素的前一個(gè)節(jié)點(diǎn) while (el) { if (el.nodeType === 1) {//元素 elements.push(el);//加到數(shù)組中 } el = el.previousSibling; } el = ele.nextSibling; while (el) { if (el.nodeType === 1) { elements.push(el); } el = el.nextSibling; } return elements;}// //能力檢測多個(gè)瀏覽器為同一個(gè)對(duì)象注冊多個(gè)事件var EventTools = { //為對(duì)象添加注冊事件 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; } }, //為對(duì)象移除事件 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; } }, //獲取參數(shù)e getEvent: function (e) { return e || window.event; }, getPageX: function (e) { if (e.pageX) { return e.pageX; } else { //有的瀏覽器把高度設(shè)計(jì)在了文檔的第一個(gè)元素中了 //有的瀏覽器把高度設(shè)計(jì)在了body中了 //document.documentElement.scrollTop;//文檔的第一個(gè)元素 //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; } }};
新聞熱點(diǎn)
疑難解答
圖片精選
