溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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變速動畫函數封裝添加任意多個屬性”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
