空間就全憑CSS的絕對定位實現位移了。在開始之前，我們練習一下setTimeout的遞歸用法（用來模擬setInterval）。
代碼如下:
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那一行改成透明度的設置。
代碼如下:
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。我們再添加一些可制定參數擴充它。注釋已經非常詳細，不明白在留言里再問我吧。
代碼如下:
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 || 0.5,
operation = 1,
init = 0;
if(to - from < 0){
operation = -1,
init = 1;
}
//內部參數
//setTimeout執行的間隔時間，單位毫秒
var frequency = 100,
//設算重復調用的次數
count = duration * 1000 / frequency,
// 設算每次透明度的遞增量
detal = Math.abs(to - from) /count,
// 正在進行的次數
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需刷新才能執行]
<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>
