快捷導(dǎo)航

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

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

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

空間就全憑CSS的絕對定位實現(xiàn)位移了。在開始之前，我們練習(xí)一下setTimeout的遞歸用法（用來模擬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(); 
} 

我們來試一下最簡單的淡入特效，就是把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(); 
} 

但是這樣并不完美，因為IE的濾鏡可能會在IE7中失效，我們必須要用zoom=1來激活hasLayout。我們再添加一些可制定參數(shù)擴充它。注釋已經(jīng)非常詳細，不明白在留言里再問我吧。

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

 
function opacity(el){ 
//必選參數(shù) 
var node = (typeof el == "string")? document.getElementById(el) : el, 
//可選參數(shù) 
options = arguments[1] || {}, 
//變化的持續(xù)時間 
duration = options.duration || 1.0, 
//開始時透明度 
from = options.from || 0.0 , 
//結(jié)束時透明度 
to = options.to || 0.5, 
operation = 1, 
init = 0; 
if(to - from < 0){ 
operation = -1, 
init = 1; 
} 
//內(nèi)部參數(shù) 
//setTimeout執(zhí)行的間隔時間，單位毫秒 
var frequency = 100, 
//設(shè)算重復(fù)調(diào)用的次數(shù) 
count = duration * 1000 / frequency, 
// 設(shè)算每次透明度的遞增量 
detal = Math.abs(to - from) /count, 
// 正在進行的次數(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需再刷新一下頁面才能執(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>
但上面并不盡善盡美，有一個Bug。我們是通過短路運算符來決定是否使用默認參數(shù)還是我們傳入的參數(shù)，但在javascript中，數(shù)字0甚至0.0都會自動轉(zhuǎn)換為false。因此在第個例子，如果我們在to中傳入0，它永遠不會用到這個0，而是默認的0.5。解決方法讓它變成字符串“0”。另，參數(shù)i也不是必須的，我們可以省去它，用count負責所有的循環(huán)，但這樣一來，我們的思維就要逆過來想了。原來是加的，我們要變成減的。

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

 
function opacity(el){ 
//必選參數(shù) 
var node = (typeof el == "string")? document.getElementById(el) : el, 
//可選參數(shù) 
options = arguments[1] || {}, 
//變化的持續(xù)時間 
duration = options.duration || 1.0, 
//開始時透明度 
from = options.from || 0.0 , 
//結(jié)束時透明度 
to = (options.to && options.to + "") || 0.5, 
operation = -1, 
init = 1; 
if(to - from < 0){ 
operation = 1, 
init = 0; 
} 
//內(nèi)部參數(shù) 
//setTimeout執(zhí)行的時間，單位 
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(); 
} 

進一步優(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) 
} 
} 