這篇文章主要介紹了JavaScript運(yùn)動(dòng)框架之鏈?zhǔn)竭\(yùn)動(dòng)的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站建設(shè)、
網(wǎng)站制作與策劃設(shè)計(jì),承留網(wǎng)站建設(shè)哪家好?
成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:承留等地區(qū)。承留做網(wǎng)站價(jià)格咨詢:13518219792
鏈?zhǔn)竭\(yùn)動(dòng)就是運(yùn)動(dòng)完后接著再運(yùn)動(dòng)，比如很多網(wǎng)站中，一個(gè)方框的出現(xiàn)和退出：出現(xiàn)時(shí)先變寬再變高，退出時(shí)先變矮再變窄退出！
之前的模型是：
startMove(obj, json);
現(xiàn)在改為：
startMove(obj, json, fn);
也就是在第一次運(yùn)動(dòng)結(jié)束的時(shí)候執(zhí)行fn(); fn是傳過來的一個(gè)參數(shù)，這個(gè)參數(shù)是個(gè)函數(shù)，定時(shí)器清理之后手動(dòng)運(yùn)行fn();如果想采用鏈?zhǔn)竭\(yùn)動(dòng)，那就是在fn中再調(diào)用startMove(obj, json, fn)，再在里面的fn中調(diào)用startMove(obj, json, fn)，可以一直玩下去
運(yùn)動(dòng)框架(五)：鏈?zhǔn)竭\(yùn)動(dòng)到完美運(yùn)動(dòng)
div {
width: 100px;
height: 100px;
background: orange;
margin: 10px;
float: left;
}
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function() {
startMove(oDiv, {width:300,opacity:30}, function() {
startMove(oDiv, {height:500});
});
};
oDiv.onmouseout = function() {
startMove(oDiv, {height:100}, function() {
startMove(oDiv, {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);
}
最后提取出來的完美運(yùn)動(dòng)框架如下，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);
}感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JavaScript運(yùn)動(dòng)框架之鏈?zhǔn)竭\(yùn)動(dòng)的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
當(dāng)前名稱：JavaScript運(yùn)動(dòng)框架之鏈?zhǔn)竭\(yùn)動(dòng)的示例分析-創(chuàng)新互聯(lián)
當(dāng)前URL：http://weahome.cn/article/jjcep.html
重慶分公司
重慶分公司
