原生JavaScript如何?淡入淡出效果？

淡入淡出效果，在日常項目中經常用到，可惜原生JS沒有類似的方法，而有時小的頁面並不值得引入一個jQuery庫，所以就自己寫了一個，已封裝， 有用得著的朋友， 可以直接使用。 代碼中另附有一個設定元素透明度的方法， 是按IE規則(0~100)設定， 若改成標準設定方法(0。00~1。00)， 下面使用時請考慮浮點精確表達差值。 參數說明: fadeIn()與fadeOut()均有三個參數，第一個是事件， 必填; 第二個是淡入淡出速度， 正整數， 大小自己權衡， 選擇性參數; 第三個， 是指定淡入淡出到的透明度值(類似於jQuery中的fadeTo())， 0~100的正整數值， 也是選擇性參數。

效果示範

請使用非IE6瀏覽器，並且等頁面載入完畢再測試。

Blog:http://www.bkjia.com

Welcome to bkjia.com

Blog:http://www.bkjia.com

Welcome to bkjia.com

Blog:http://www.bkjia.com

Welcome to bkjia.com

JavaScript代碼

window.onload = function(){//底層共用    var iBase = {        Id: function(name){            return document.getElementById(name);        },//設定元素透明度,透明度值按IE規則計,即0~100        SetOpacity: function(ev, v){            ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;        }    }//淡入效果(含淡入到指定透明度)function fadeIn(elem, speed, opacity){/* * 參數說明 * elem==>需要淡入的元素 * speed==>淡入速度,正整數(可選) * opacity==>淡入到指定的透明度,0~100(可選) */    speed = speed || 20;    opacity = opacity || 100;//顯示元素,並將元素值為0透明度(不可見)    elem.style.display = 'block';    iBase.SetOpacity(elem, 0);//初始化透明度變化值為0    var val = 0;//迴圈將透明值以5遞增,即淡入效果    (function(){        iBase.SetOpacity(elem, val);        val += 5;        if (val <= opacity) {            setTimeout(arguments.callee, speed)        }    })();}//淡出效果(含淡出到指定透明度)function fadeOut(elem, speed, opacity){/* * 參數說明 * elem==>需要淡入的元素 * speed==>淡入速度,正整數(可選) * opacity==>淡入到指定的透明度,0~100(可選) */    speed = speed || 20;    opacity = opacity || 0;    //初始化透明度變化值為0    var val = 100;//迴圈將透明值以5遞減,即淡出效果    (function(){        iBase.SetOpacity(elem, val);        val -= 5;        if (val >= opacity) {            setTimeout(arguments.callee, speed);        }else if (val < 0) {//元素透明度為0後隱藏元素            elem.style.display = 'none';        }    })();}            var btns = iBase.Id('demo').getElementsByTagName('input');        btns[0].onclick = function(){        fadeIn(iBase.Id('fadeIn'));    }    btns[1].onclick = function(){        fadeOut(iBase.Id('fadeOut'),40);    }    btns[2].onclick = function(){        fadeOut(iBase.Id('fadeTo'), 20, 10);    }    }