這篇文章主要介紹了JavaScript運動框架的第五部分，鍊式運動到完美運動，具有一定的參考價值，感興趣的小伙伴們可以參考一下
基於前幾篇的運動框架基礎，本文主要講解一下鍊式運動，就是運動完後接著再運動，比如很多網站中，一個方框的出現和退出 ：出現時先變寬再變高，退出時先變矮再變窄退出！
之前的模型是：
startMove(obj, json);
現在改為：
startMove(obj, json, fn);
也就是在第一次運動結束的時候執行fn(); fn是傳過來的一個參數，這個參數是個函數，計時器清理之後手動運行fn();如果想採用鍊式運動，那就是在fn中再呼叫startMove (obj, json, fn)，再在裡面的fn中呼叫startMove(obj, json, fn)，可以一直玩下去
<!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() {
startMove(op, {width:300,opacity:30}, function() {
startMove(op, {height:500});
});
};
op.onmouseout = function() {
startMove(op, {height:100}, function() {
startMove(op, {width:100,opacity:100});
})
};
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, null)[attr];
}
}
function startMove(obj, json, fn) {
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));
}
if (cur != json[attr]) {
bStop = false;
}
var speed = (json[attr] - cur)/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
cur += speed;
if (attr === 'opacity') {
obj.style.filter = 'alpha(opacity:' + cur + ')';
obj.style.opacity = cur/100;
} else {
obj.style[attr] = cur + 'px';
}
}
if (bStop) {
clearInterval(obj.timer);
if (fn) fn();
}
}, 30);
}
</script>
</body>
</html>最後提取出來的完美運動框架如下，motionFrame.js：
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, null)[attr];
}
}
function startMove(obj, json, fn) {
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));
}
if (cur != json[attr]) {
bStop = false;
}
var speed = (json[attr] - cur)/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
cur += speed;
if (attr === 'opacity') {
obj.style.filter = 'alpha(opacity:' + cur + ')';
obj.style.opacity = cur/100;
} else {
obj.style[attr] = cur + 'px';
}
}
if (bStop) {
clearInterval(obj.timer);
if (fn) fn();
}
}, 30);
}以上是JavaScript運動框架之鍊式運動到完美運動的範例程式碼（五）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
