淺析Javascript透明特效的可控式實(shí)現(xiàn)

作者：司徒正美 2009-09-14 19:21:36

這里將介紹Javascript透明特效的可控式實(shí)現(xiàn)，也就是特效可以被控制，希望本文能對(duì)大家有所幫助。

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

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）。

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è)置。

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ì)，不明白在留言里再問(wèn)我吧。

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(); 
}

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)是加的，我們要變成減的。

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)化，利用原型共享方法。

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) 
  } 
}

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
【編輯推薦】

JSON是什么？為JavaScript準(zhǔn)備的數(shù)據(jù)格式 
十個(gè)最常用的JavaScript自定義函數(shù) 
有關(guān)JavaScript事件加載的一些延伸思考 
JavaScript使用心得匯總：從BOM和DOM談起 
ExtJS在Android模擬器上的運(yùn)行效果

責(zé)任編輯：彭凡來(lái)源：博客園

Javascript透明特效