這篇文章主要為大家詳細介紹了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">
p {
width: 100px;
height: 100px;
background: orange;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
var op = document.getElementById('p1');
op.onmouseover = function() {
var json = {
width: 600,
height: 200,
opacity: 30
};
startMove(this, json);
};
op.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運動框架之多值運動的具體介紹（四）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
