快捷導(dǎo)航

javascript 可控式透明特效實(shí)現(xiàn)代碼

更新時(shí)間：2010年01月02日 13:13:57 作者：

透明特效是script.aculo.us提到的特效中最簡(jiǎn)單的特效之一。既然是特效，必須涉及時(shí)間與空間的概念。時(shí)間我們可以用setTimeout與setInterval，個(gè)人比較喜歡setTimeout，雖然它每次調(diào)用都重復(fù)注冊(cè)，但可控性比較好。

空間就全憑CSS的絕對(duì)定位實(shí)現(xiàn)位移了。在開始之前，我們練習(xí)一下setTimeout的遞歸用法（用來(lái)模擬setInterval）。

復(fù)制代碼代碼如下:

 
function text(el){ 
var node = (typeof el == "string")? document.getElementById(el) : el; 
var i = 0; 
var repeat = function(){ 
setTimeout(function(){ 
node.innerHTML = "<h1>"+i+"</h1>"; 
i++; 
if(i <= 100){ 
setTimeout(arguments.callee, 100); 
} 
},100) 
} 
repeat(); 
} 

我們來(lái)試一下最簡(jiǎn)單的淡入特效，就是把node.innerHTML那一行改成透明度的設(shè)置。

復(fù)制代碼代碼如下:

 
function fadeIn(el){ 
var node = (typeof el == "string")? document.getElementById(el) : el; 
var i = 0; 
var fade = function(){ 
setTimeout(function(){ 
!+"\v1"? (node.style.filter="alpha(opacity="+i+")"): (node.style.opacity = i / 100); 
i++; 
if(i <= 100){ 
setTimeout(arguments.callee, 100); 
} 
},100) 
} 
fade(); 
} 

但是這樣并不完美，因?yàn)镮E的濾鏡可能會(huì)在IE7中失效，我們必須要用zoom=1來(lái)激活hasLayout。我們?cè)偬砑右恍┛芍贫▍?shù)擴(kuò)充它。注釋已經(jīng)非常詳細(xì)，不明白在留言里再問我吧。

復(fù)制代碼代碼如下:

 
function opacity(el){ 
//必選參數(shù) 
var node = (typeof el == "string")? document.getElementById(el) : el, 
//可選參數(shù) 
options = arguments[1] || {}, 
//變化的持續(xù)時(shí)間 
duration = options.duration || 1.0, 
//開始時(shí)透明度 
from = options.from || 0.0 , 
//結(jié)束時(shí)透明度 
to = options.to || 0.5, 
operation = 1, 
init = 0; 
if(to - from < 0){ 
operation = -1, 
init = 1; 
} 
//內(nèi)部參數(shù) 
//setTimeout執(zhí)行的間隔時(shí)間，單位毫秒 
var frequency = 100, 
//設(shè)算重復(fù)調(diào)用的次數(shù) 
count = duration * 1000 / frequency, 
// 設(shè)算每次透明度的遞增量 
detal = Math.abs(to - from) /count, 
// 正在進(jìn)行的次數(shù) 
i = 0; 
var main = function(){ 
setTimeout(function(){ 
if(!+"\v1"){ 
if(node.currentStyle.hasLayout) node.style.zoom = 1;//防止濾鏡失效 
node.style.filter="alpha(opacity="+ (init * 100 + operation * detal * i * 100).toFixed(1) +")" 
}else{ 
node.style.opacity = (init + operation * detal * i).toFixed(3) 
} 
node.innerHTML = (init + operation * detal * i).toFixed(3) 
i++; 
if(i <= count){ 
setTimeout(arguments.callee, frequency); 
} 
},frequency) 
} 
main(); 
} 

效果演示：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

<div class="text" onclick="opacity(this,{duration:4.0,from:0.0,to:1})"></div>
<div class="text" onclick="opacity(this,{duration:4.0,from:1.0,to:0})"></div>
但上面并不盡善盡美，有一個(gè)Bug。我們是通過短路運(yùn)算符來(lái)決定是否使用默認(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)，但這樣一來(lái)，我們的思維就要逆過來(lái)想了。原來(lái)是加的，我們要變成減的。

復(fù)制代碼代碼如下:

 
function opacity(el){ 
//必選參數(shù) 
var node = (typeof el == "string")? document.getElementById(el) : el, 
//可選參數(shù) 
options = arguments[1] || {}, 
//變化的持續(xù)時(shí)間 
duration = options.duration || 1.0, 
//開始時(shí)透明度 
from = options.from || 0.0 , 
//結(jié)束時(shí)透明度 
to = (options.to && options.to + "") || 0.5, 
operation = -1, 
init = 1; 
if(to - from < 0){ 
operation = 1, 
init = 0; 
} 
//內(nèi)部參數(shù) 
//setTimeout執(zhí)行的時(shí)間，單位 
var frequency = 100, 
//設(shè)算重復(fù)調(diào)用的次數(shù) 
count = duration * 1000 / frequency, 
// 設(shè)算每次透明度的遞增量 
detal = operation * Math.abs(to - from) /count; 
var main = function(){ 
setTimeout(function(){ 
if(!+"\v1"){ 
if(node.currentStyle.hasLayout) node.style.zoom = 1;//防止濾鏡失效 
node.style.filter="alpha(opacity="+ (init * 100 + detal * count * 100).toFixed(1) +")" 
}else{ 
node.style.opacity = (init + detal * count).toFixed(3) 
} 
count--; 
if(count + 1){ 
setTimeout(arguments.callee, frequency); 
} 
},frequency) 
} 
main(); 
} 

進(jìn)一步優(yōu)化，利用原型共享方法。

復(fù)制代碼代碼如下:

 
function Opacity(el){ 
var node = (typeof el == "string")? document.getElementById(el) : el, 
options = arguments[1] || {}, 
duration = options.duration || 1.0, 
from = options.from || 0.0 , 
to = (options.to && options.to + "") || 0.5, 
operation = -1, 
init = 1; 
if(to - from < 0){ 
operation = 1, 
init = 0; 
} 
var frequency = 100, 
count = duration * 1000 / frequency, 
detal = operation * Math.abs(to - from) /count; 
this.main(node,init,detal,count,frequency); 
} 
Opacity.prototype = { 
main : function(node,init,detal,count,frequency){ 
setTimeout(function(){ 
if(!+"\v1"){ 
if(node.currentStyle.hasLayout) node.style.zoom = 1;//防止濾鏡失效 
node.style.filter="alpha(opacity="+ (init * 100 + detal * count * 100).toFixed(1) +")" 
}else{ 
node.style.opacity = (init + detal * count).toFixed(3) 
} 
node.innerHTML = (init + detal * count).toFixed(3) 
count--; 
if(count + 1){ 
setTimeout(arguments.callee, frequency); 
} 
},frequency) 
} 
} 