在開發的過程中，我們要做淡入淡出效果的話，我們完全可以使用jQuery的fadeTo()方法。但是我們的目的不只是會用，而是理解程序底層的邏輯。這篇文章主要就是利用原生的javascript實現淡入淡出的效果。
構建框架，基本沒難度。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>透明度函數的封裝</title> <style type="text/css"> #box{ width: 200px; height: 200px; background: red; margin: 50px auto; opacity: .3; filter: alpha(opacity:30); } </style> </head> <body> <div id="box"></div> <script src="toumingdu.js" type="text/javascript" charset="utf-8"></script> </body> </html> 編寫javascript部分，主要難點是changeOpacity()函數。
window.onload = function (){ var box = document.getElementById('box'); box.onmouseover = function (){ changeOpacity(this,100); } box.onmouseout = function (){ changeOpacity(this,30); } } /** * * @param {Object} box 要變化透明度的元素 * @param {Object} target 透明度的目標值（100為最高） */ function changeOpacity(box,target){ var opa; var speed; if(box.currentStyle){ //判斷瀏覽器類型，此類型為IE瀏覽器，即使IE不支持opacity屬性，但是仍然可以獲取值 opa = box.currentStyle['opacity']*100; } else{//其他瀏覽器 opa = getComputedStyle(box,false)['opacity']*100; } //透明度每次變化的值（步長），根據目標值和當前值的差來決定步長的正負 target-opa>=0?speed=1:speed=-1; clearInterval(box.timer); box.timer = setInterval(function (){ //目標值和當前值差值的絕對值大于等于步長的絕對值，設置透明度為當前值加步長 if(Math.abs(target-opa)>=Math.abs(speed)){ box.style.opacity=(opa+speed)/100; box.style.filter='alpha(opacity:'+(opa+speed)+')'; } //目標值和當前值差值的絕對值小于步長的絕對值，剩余的距離一步到位， //設置透明度直接為目標值，同時清除定時器 else{ box.style.opacity=target/100; box.style.filter='alpha(opacity:'+target+')'; clearInterval(box.timer); } //直接對透明度參數進行加步長的運算，避免每次都要獲取當前透明度 opa=opa+speed; },30); } 這個透明度函數的原理在大體上是跟運動函數相同的。總結為三步：
1、獲取當前值，根據目標值和當前值確定步長；
2、變化的過程，每次變化一個值（漸變動畫和透明度其步長為不同的值，而勻速動畫和透明度步長為定值）；
3、判斷是否達到目標值，達到則清除定時器，結束。
所以如果原理弄不清楚可以看一下另一篇文章javascript勻速動畫和緩沖動畫。
而在理解原理的情況下最大的難點應該是當前透明度的獲取了（賦值比較簡單）。獲取透明度的值我們要考慮兩種情況：
1、IE，雖然在在IE下不支持opacity屬性，但是我們是可以通過box.currentStyle['opacity']獲取到它的值的，同時我們在寫入的時候也會將給opacity的值寫入css中，盡管IE不會因為opacity值的改變而變化透明度。
2、其他瀏覽器，其他瀏覽器是支持opacity屬性，所以我們操作相對簡單了許多，寫入和讀取都針對opacity即可。
接下來細講在IE瀏覽器中的操作：
首先我們的css文件中有兩個屬性值在我們的操作中是有用的 opacity: .3; filter: alpha(opacity:30); 顯然我們很難獲取filter屬性中的opacity值（我不會！），但是如果我們使用currentStyle來獲取opacity是比較簡單的。所以我進行了測試發現，盡管IE不支持這個屬性，但是這個屬性值的讀取和寫入時完全沒問題的，所以，問題就迎刃而解了！我們通過opacity可以讀取當前透明度，然后通過filter改變透明度，同時，我們改變opacity的值（不僅是為了兼容其他瀏覽器，同時我們寫入以后IE瀏覽器中在下次移入的時候還可以獲取當前的透明度，否則的話獲取的是初始的opacity值）。那么下面不就和動畫那個問題一樣了？
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
