下面通過實例代碼給大家介紹JavaScript變速動畫函數(shù)封裝添加任意多個屬性 ，具體代碼如下所示：
<!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>
//點擊按鈕，使元素的寬度到達(dá)一個值，高度到達(dá)一個值
//獲取任意元素的任意屬性值
function getStyle(element, attr) {
//判斷瀏覽器是否支持這個方法
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
}
//使任意元素，改變多個值的大小
function animate(element, json) {
//清理定時器
clearInterval(element.timeId);
//創(chuàng)建定時器
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)前屬性對應(yīng)的目標(biāo)值
var target = json[attr];
//移動的步數(shù)
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("目標(biāo):" + target + ",當(dāng)前:" + current + ",每次的移動步數(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;//存儲日期的字符串
//獲取年
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;//隱藏問題,關(guān)于變量聲明的位置
return strDate;
}
//根據(jù)id獲取元素對象
function my$(id) {
return document.getElementById(id);
}
/*
*
* innerText屬性IE中支持
* textContent火狐中支持
* dvObj.innerText="您好";設(shè)置innerText的值
* console.log(dvObj.innerText);獲取innerText的值
* 因為上述原因,inerText有時候需要設(shè)置值，有時候需要獲取值
* 所以,需要寫一個兼容的代碼能在火狐中使用,也可以在IE中使用
*
*
* */
/*
*設(shè)置innerText屬性的值
* element-----為某個元素設(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)前元素前一個元素
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)前元素的后一個元素
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;//判斷當(dāng)前的ele這個元素是否存在
var elements = [];//定義數(shù)組的目的就是存儲當(dāng)前這個元素的所有的兄弟元素
var el = ele.previousSibling;//當(dāng)前元素的前一個節(jié)點
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;
}
// //能力檢測多個瀏覽器為同一個對象注冊多個事件
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;
}
},
//獲取參數(shù)e
getEvent: function (e) {
return e || window.event;
},
getPageX: function (e) {
if (e.pageX) {
return e.pageX;
} else {
//有的瀏覽器把高度設(shè)計在了文檔的第一個元素中了
//有的瀏覽器把高度設(shè)計在了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;
}
}
};補(bǔ)充：js 變速動畫函數(shù)
//獲取任意一個元素的任意一個屬性的當(dāng)前的值---當(dāng)前屬性的位置值
function getStyle(element, attr) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
}
//變速動畫函數(shù)封裝增加任意多個屬性和回調(diào)函數(shù)及層級還有透明度
//element元素 json對象 存儲屬性與值 fn為回調(diào)函數(shù)
function animate(element, json, fn) {
//清理定時器
clearInterval(element.timeid);
//設(shè)置定時器
element.timeid = setInterval(function () {
//假設(shè)全部到達(dá)目標(biāo)
var f = true;
//循環(huán)去獲取傳入的數(shù)據(jù)
for (var i in json) {
//判斷傳入的值 是不是opacity
if (i == 'opacity') {
//獲取當(dāng)前opacity的值 并且放大100倍
var current = getStyle(element, i) * 100;
//把目標(biāo)值也放大100倍
var target = json[i] * 100;
//移動的步數(shù)
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') {
//直接設(shè)置zIndex
element.style[i] = json[i];
} else {
//普通屬性獲取（轉(zhuǎn)化成數(shù)字）
var current = parseInt(getStyle(element, i));
//目標(biāo)屬性值
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';
}
//只要有一個沒達(dá)到目標(biāo)就設(shè)置F為false
if (current != target) {
f = false;
}
//目標(biāo)到達(dá) 清理定時器 判斷有沒有回調(diào)函數(shù)
if (f) {
clearInterval(element.timeid);
if (fn) {
fn();
}
}
}
console.log("目標(biāo):" + target + ",當(dāng)前:" + current + ",每次的移動步數(shù):" + step);
}, 20)
}總結(jié)
以上所述是小編給大家介紹的JavaScript變速動畫函數(shù)封裝添加任意多個屬性，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2024 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
