淺析Javascript透明特效的可控式實現

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

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

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

Javascript透明特效是script.aculo.us提到的特效中最簡單的特效之一。既然是特效，必須涉及時間與空間的概念。時間我們可以用setTimeout與setInterval，個人比較喜歡setTimeout，雖然它每次調用都重復注冊，但可控性比較好。空間就全憑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(); 
}

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>

但上面并不盡善盡美，有一個Bug。我們是通過短路運算符來決定是否使用默認參數還是我們傳入的參數，但在Javascript中，數字0甚至0.0都會自動轉換為false。因此在第個例子，如果我們在to中傳入0，它永遠不會用到這個0，而是默認的0.5。解決方法讓它變成字符串“0”。另，參數i也不是必須的，我們可以省去它，用count負責所有的循環，但這樣一來，我們的思維就要逆過來想了。原來是加的，我們要變成減的。

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; 
  } 
  //內部參數 
  //setTimeout執行的時間，單位 
  var frequency = 100, 
  //設算重復調用的次數 
  count = duration * 1000 / frequency, 
  // 設算每次透明度的遞增量 
  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(); 
}

進一步優化，利用原型共享方法。

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>


原文標題：javascript的可控式透明特效
鏈接：http://www.cnblogs.com/rubylouvre/archive/2009/09/14/1566532.html
【編輯推薦】

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

責任編輯：彭凡來源：博客園

Javascript透明特效

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

淺析Javascript透明特效的可控式實現