本文實(shí)例講述了javascript運(yùn)動(dòng)框架用法。分享給大家供大家參考，具體如下：
該運(yùn)動(dòng)框架可以實(shí)現(xiàn)多物體任意值運(yùn)動(dòng)
運(yùn)行效果截圖如下：
例子：
<!doctype html><html><head><meta charset="utf-8"><title>運(yùn)動(dòng)框架</title><style>#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px; opacity:0.3; filter:alpha(opacity=30);}</style><script>window.onload = function(){ var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function() { startMove(oDiv, {width:200, height:200, opacity:100}, function(){ startMove(oDiv, {width:100, height:100, opacity:30}); }); };};function getStyle(obj, attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj, false)[attr]; }}function startMove(obj, json, fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var bStop = true; for(var attr in json){ var iCur = 0; if(attr == 'opacity'){ iCur = Math.round(parseFloat(getStyle(obj, attr))*100); }else{ iCur = parseInt(getStyle(obj, attr)); } var iSpeed = (json[attr] - iCur)/8; iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(iCur != json[attr]){ bStop = false; } if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity='+(iCur+iSpeed)+')'; obj.style.opacity = (iCur+iSpeed)/100; }else{ obj.style[attr] = iCur + iSpeed + 'px'; } } if(bStop){ clearInterval(obj.timer); if(fn){ fn(); } } }, 30);}</script></head><body><input id="btn1" type="button" value="運(yùn)動(dòng)"/><div id="div1"></div></body></html>更多關(guān)于JavaScript運(yùn)動(dòng)效果相關(guān)內(nèi)容可查看本站專題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
