可控式Javascript透明特效也就是透明度可以自行設(shè)置，但是這種方法在IE7下極有可能失效，不過(guò)這些東西對(duì)大家了解Javascript透明特效還是有所幫助的。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、新干網(wǎng)絡(luò)推廣、微信小程序、新干網(wǎng)絡(luò)營(yíng)銷、新干企業(yè)策劃、新干品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供新干建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

Javascript透明特效是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）。

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 = "

"+i+"

我們來(lái)試一下最簡(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來(lái)激活hasLayout。我們?cè)偬砑右恍┛芍贫▍?shù)擴(kuò)充它。注釋已經(jīng)非常詳細(xì)，不明白在留言里再問(wè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 || 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。我們是通過(guò)短路運(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)，我們的思維就要逆過(guò)來(lái)想了。原來(lái)是加的，我們要變成減的。

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>