本文實例講述了js實現類似jquery里animate動畫效果的方法。分享給大家供大家參考。具體分析如下：
該實例可實現鼠標移上，先寬度變化，再高度變化，最后透明度變化，鼠標移出，再依次變回去的效果。
要點一：
startrun(obj,attr,target,fn)box.onmouseover = function(){startrun(box,"width",200,function(){startrun(box,"height",200,function(){startrun(box,"opacity","100")});});}如上面，函數也可以做為參數使用，就可以達到先執行某個動作，再執行某個動作的效果了。
要點二：
if(cur == target){clearInterval(obj.timer);if(fn){fn();}}當運動到達目標點，關閉定時器，然后就可以執行新的函數了。
最后，上代碼：
<!DOCTYPE html><html><head><meta charset="gb2312" /><title>無標題文檔</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>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
