淺析Javascript透明特效的可控式實(shí)現(xiàn)
作者：司徒正美
這里將介紹Javascript透明特效的可控式實(shí)現(xiàn)，也就是特效可以被控制，希望本文能對(duì)大家有所幫助。
可控式Javascript透明特效也就是透明度可以自行設(shè)置，但是這種方法在IE7下極有可能失效，不過這些東西對(duì)大家了解Javascript透明特效還是有所幫助的。
Javascript透明特效是script.aculo.us提到的特效中最簡(jiǎn)單的特效之一。既然是特效，必須涉及時(shí)間與空間的概念。時(shí)間我們可以用setTimeout與setInterval，個(gè)人比較喜歡setTimeout，雖然它每次調(diào)用都重復(fù)注冊(cè)，但可控性比較好?？臻g就全憑CSS的絕對(duì)定位實(shí)現(xiàn)位移了。在開始之前，我們練習(xí)一下setTimeout的遞歸用法（用來模擬setInterval）。
01.function text(el){ 02. var node = (typeof el == "string")? document.getElementById(el) : el; 03. var i = 0; 04. var repeat = function(){ 05. setTimeout(function(){ 06. node.innerHTML = "<h1>"+i+"</h1>"; 07. i++; 08. if(i <= 100){ 09. setTimeout(arguments.callee, 100); 10. } 11. },100) 12. } 13. repeat(); 14.}我們來試一下最簡(jiǎn)單的淡入特效，就是把node.innerHTML那一行改成透明度的設(shè)置。
01.function fadeIn(el){ 02. var node = (typeof el == "string")? document.getElementById(el) : el; 03. var i = 0; 04. var fade = function(){ 05. setTimeout(function(){ 06. !+"\v1"? (node.style.filter="alpha(opacity="+i+")"): (node.style.opacity = i / 100); 07. i++; 08. if(i <= 100){ 09. setTimeout(arguments.callee, 100); 10. } 11. },100) 12. } 13. fade(); 14.}但是這樣并不完美，因?yàn)镮E的濾鏡可能會(huì)在IE7中失效，我們必須要用zoom=1來激活hasLayout。我們?cè)偬砑右恍┛芍贫▍?shù)擴(kuò)充它。注釋已經(jīng)非常詳細(xì)，不明白在留言里再問我吧。
01.function opacity(el){ 02. //必選參數(shù) 03. var node = (typeof el == "string")? document.getElementById(el) : el, 04. //可選參數(shù) 05. options = arguments[1] || {}, 06. //變化的持續(xù)時(shí)間 07. duration = options.duration || 1.0, 08. //開始時(shí)透明度 09. from = options.from || 0.0 , 10. //結(jié)束時(shí)透明度 11. to = options.to || 0.5, 12. operation = 1, 13. init = 0; 14. if(to - from < 0){ 15. operation = -1, 16. init = 1; 17. } 18. //內(nèi)部參數(shù) 19. //setTimeout執(zhí)行的間隔時(shí)間，單位毫秒 20. var frequency = 100, 21. //設(shè)算重復(fù)調(diào)用的次數(shù) 22. count = duration * 1000 / frequency, 23. // 設(shè)算每次透明度的遞增量 24. detal = Math.abs(to - from) /count, 25. // 正在進(jìn)行的次數(shù) 26. i = 0; 27. var main = function(){ 28. setTimeout(function(){ 29. if(!+"\v1"){ 30. if(node.currentStyle.hasLayout) node.style.zoom = 1;//防止濾鏡失效 31. node.style.filter="alpha(opacity="+ (init * 100 + operation * detal * i * 100).toFixed(1) +")"32. }else{ 33. node.style.opacity = (init + operation * detal * i).toFixed(3) 34. } 35. node.innerHTML = (init + operation * detal * i).toFixed(3) 36. i++; 37. if(i <= count){ 38. setTimeout(arguments.callee, frequency); 39. } 40. },frequency) 41. } 42. main(); 43.}100.0
50.0
1.<div class="text" onclick="opacity(this,{duration:4.0,from:0.0,to:1})"></div> 2.<div class="text" onclick="opacity(this,{duration:4.0,from:1.0,to:0})"></div>但上面并不盡善盡美，有一個(gè)Bug。我們是通過短路運(yùn)算符來決定是否使用默認(rèn)參數(shù)還是我們傳入的參數(shù)，但在Javascript中，數(shù)字0甚至0.0都會(huì)自動(dòng)轉(zhuǎn)換為false。因此在第個(gè)例子，如果我們?cè)趖o中傳入0，它永遠(yuǎn)不會(huì)用到這個(gè)0，而是默認(rèn)的0.5。解決方法讓它變成字符串“0”。另，參數(shù)i也不是必須的，我們可以省去它，用count負(fù)責(zé)所有的循環(huán)，但這樣一來，我們的思維就要逆過來想了。原來是加的，我們要變成減的。
01.function opacity(el){ 02. //必選參數(shù) 03. var node = (typeof el == "string")? document.getElementById(el) : el, 04. //可選參數(shù) 05. options = arguments[1] || {}, 06. //變化的持續(xù)時(shí)間 07. duration = options.duration || 1.0, 08. //開始時(shí)透明度 09. from = options.from || 0.0 , 10. //結(jié)束時(shí)透明度 11. to = (options.to && options.to + "") || 0.5, 12. operation = -1, 13. init = 1; 14. if(to - from < 0){ 15. operation = 1, 16. init = 0; 17. } 18. //內(nèi)部參數(shù) 19. //setTimeout執(zhí)行的時(shí)間，單位 20. var frequency = 100, 21. //設(shè)算重復(fù)調(diào)用的次數(shù) 22. count = duration * 1000 / frequency, 23. // 設(shè)算每次透明度的遞增量 24. detal = operation * Math.abs(to - from) /count; 25. var main = function(){ 26. setTimeout(function(){ 27. if(!+"\v1"){ 28. if(node.currentStyle.hasLayout) node.style.zoom = 1;//防止濾鏡失效 29. node.style.filter="alpha(opacity="+ (init * 100 + detal * count * 100).toFixed(1) +")"30. }else{ 31. node.style.opacity = (init + detal * count).toFixed(3) 32. } 33. count--; 34. if(count + 1){ 35. setTimeout(arguments.callee, frequency); 36. } 37. },frequency) 38. } 39. main(); 40.}進(jìn)一步優(yōu)化，利用原型共享方法。
01.function Opacity(el){ 02. var node = (typeof el == "string")? document.getElementById(el) : el, 03. options = arguments[1] || {}, 04. duration = options.duration || 1.0, 05. from = options.from || 0.0 , 06. to = (options.to && options.to + "") || 0.5, 07. operation = -1, 08. init = 1; 09. if(to - from < 0){ 10. operation = 1, 11. init = 0; 12. } 13. var frequency = 100, 14. count = duration * 1000 / frequency, 15. detal = operation * Math.abs(to - from) /count; 16. this.main(node,init,detal,count,frequency); 17.} 18.Opacity.prototype = { 19. main : function(node,init,detal,count,frequency){ 20. setTimeout(function(){ 21. if(!+"\v1"){ 22. if(node.currentStyle.hasLayout) node.style.zoom = 1;//防止濾鏡失效 23. node.style.filter="alpha(opacity="+ (init * 100 + detal * count * 100).toFixed(1) +")"24. }else{ 25. node.style.opacity = (init + detal * count).toFixed(3) 26. } 27. node.innerHTML = (init + detal * count).toFixed(3) 28. count--; 29. if(count + 1){ 30. setTimeout(arguments.callee, frequency); 31. } 32. },frequency) 33. } 34.}1.000
0.000
1.<div class="text" onclick="new Opacity(this,{duration:4.0,from:0.0,to:1})"></div> 2.<div class="text" onclick="new Opacity(this,{duration:4.0,from:1.0,to:0})"></div>
原文標(biāo)題：javascript的可控式透明特效
鏈接：http://www.cnblogs.com/rubylouvre/archive/2009/09/14/1566532.html
【編輯推薦】
責(zé)任編輯：彭凡
來源：
博客園
