本文實(shí)例講述了js實(shí)現(xiàn)類(lèi)似jquery里animate動(dòng)畫(huà)效果的方法。分享給大家供大家參考。具體分析如下：
該實(shí)例可實(shí)現(xiàn)鼠標(biāo)移上，先寬度變化，再高度變化，最后透明度變化，鼠標(biāo)移出，再依次變回去的效果。
要點(diǎn)一：
startrun(obj,attr,target,fn)box.onmouseover = function(){startrun(box,"width",200,function(){startrun(box,"height",200,function(){startrun(box,"opacity","100")});});}如上面，函數(shù)也可以做為參數(shù)使用，就可以達(dá)到先執(zhí)行某個(gè)動(dòng)作，再執(zhí)行某個(gè)動(dòng)作的效果了。
要點(diǎn)二：
if(cur == target){clearInterval(obj.timer);if(fn){fn();}}當(dāng)運(yùn)動(dòng)到達(dá)目標(biāo)點(diǎn)，關(guān)閉定時(shí)器，然后就可以執(zhí)行新的函數(shù)了。
最后，上代碼：
<!DOCTYPE html><html><head><meta charset="gb2312" /><title>無(wú)標(biāo)題文檔</title><style><!--body{margin:0; padding:0; font:12px/1.5 arial;}#box{width:100px; height:100px; position:absolute;background:#06c; left:0;filter:alpha(opacity=30); opacity:0.3;}--></style><script><!--function getstyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; }}window.onload = function(){ var box = document.getElementById("box"); box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,function(){ startrun(box,"opacity","100") }); }); } box.onmouseout = function(){ startrun(box,"height",100,function(){ startrun(box,"width",100,function(){ startrun(box,"opacity","30"); }); }); }}function startrun(obj,attr,target,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var cur = 0; if(attr == "opacity"){ cur = Math.round(parseFloat(getstyle(obj,attr))*100); }else{ cur = parseInt(getstyle(obj,attr)); } var speed = (target-cur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(cur == target){ clearInterval(obj.timer); if(fn){ fn(); } }else{ if(attr == "opacity"){ obj.style.filter = "alpha(opacity="+(cur+speed)+")"; obj.style.opacity = (cur+speed)/100; }else{ obj.style[attr] = cur + speed + "px"; } } },30)}//--></script></head><body><div id="box"></div></body></html>希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
