溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹JavaScript運動框架之多值運動的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
多值運動，也就是對于某個對象來說，不僅僅只是其中一個屬性值在變化，而是好多個，比如寬，高，字體，透明度等等同時變化
當然了，多值運動會產生一個問題，就是定時器何時關閉的問題！當然是所有的屬性值都運動到目標值了才能清理定時器，也就是等最慢的。就好比十個人一起聚餐，不能等到來一個人就開吃！
前幾篇講的都是一個元素對象中某一個屬性的運動，這次講同一個元素對象中多個屬性值的緩沖運動，那么每個屬性都有個終點（目標點），我們把這些屬性及其目標值寫成一個對象的形式，或者是json狀！容易產生的問題就是上面說的，這里用了共同的速度函數，但有的屬性值從100 –> 101, 有的屬性值從100 –> 600，你得等耗時最長的屬性值到達目標值才能關閉該obj所擁有的定時器，設計的思路就是每次執行輪詢函數設置一個bStob = true;在遍歷掃描json中屬性的時候，只要有沒到到目標值的屬性，就設為false，這樣定時器就不會關閉，即使有的屬性值已經到達終點，此時輪詢依舊會執行掃描，只不過此時該屬性運動速度為0了，也不會運動了。也就是之前：
if(attr == cur) {
cleartInterval(obj.timer);
}要增強為：
if (bStop) {
clearInterval(obj.timer);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>運動框架(四)：多值運動</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: orange;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function() {
var json = {
width: 600,
height: 200,
opacity: 30
};
startMove(this, json);
};
oDiv.onmouseout = function() {
var json = {
width: 100,
height: 100,
opacity: 100
};
startMove(this, json);
};
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, json) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var bStop = true;
for (var attr in json) {
var cur = 0;
if (attr === 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - cur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur != json[attr]) {//凡是有未到達目標點的，一律不讓定時器停下，否則有的屬性不能到達目標值
bStop = false;
}
if (attr === 'opacity') {
cur += speed;
obj.style.filter = 'alpha(opacity:' + cur + ')';
obj.style.opacity = cur / 100;//Chrome,IE
} else {
obj.style[attr] = cur + speed + 'px';
}
}
//整個循環結束后，仍然保持著true，說明沒有沒到達目標值的屬性，也就是都到了
if (bStop) {
clearInterval(obj.timer);//說明所有的屬性都到達了目標值
}
}, 30);
}
</script>
</body>
</html>
以上是“JavaScript運動框架之多值運動的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
