淡入淡出效果，在日常項目中經常用到，可惜原生JS沒有類似的方法，而有時小的頁面并不值得引入一個jQuery庫，所以就自己寫了一個，已封裝，有用得著的朋友，可以直接使用。代碼中另附有一個設置元素透明度的方法， 是按IE規則(0~100)設置， 若改成標準設置方法(0.00~1.00),，下面使用時請考慮浮點精確表達差值。
參數說明：
fadeIn()與fadeOut()均有三個參數，第一個是事件， 必填；第二個是淡入淡出速度，正整數，大小自己權衡，可選參數；第三個, 是指定淡入淡出到的透明度值(類似于jQuery中的fadeTo())， 0~100的正整數值，也是可選參數。
關鍵代碼：
//淡入效果(含淡入到指定透明度) function fadeIn(elem, speed, opacity){ /* * 參數說明 * elem==>需要淡入的元素 * speed==>淡入速度,正整數(可選) * opacity==>淡入到指定的透明度,0~100(可選) */ speedspeed = speed || 20; opacityopacity = 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(可選) */ speedspeed = speed || 20; opacityopacity = 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'; } })(); } 效果圖：
核心代碼，大家可以直接復制代碼查看效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>原生JS實現淡入淡出效果</title> <style> /*demo css*/ #demo div.box {float:left;width:31%;margin:0 1%} #demo div.box h2{margin-bottom:10px} #demo div.box h2 input{padding:5px 8px;font-size:14px;font-weight:bolder} #demo div.box div{text-indent:10px; line-height:22px;border:2px solid #555;padding:0.5em;overflow:hidden} </style> <script> 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(可選) */ speedspeed = speed || 20; opacityopacity = 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(可選) */ speedspeed = speed || 20; opacityopacity = 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); } } </script> </head> <body> <!--DEMO start--> <div id="demo"> <div class="box"> <h2><input type="button" value="點擊淡入" /></h2> <div id="fadeIn" style="display:none"> <p>武林網</p> </div> <p>武林網是國內專業的網站建設資源、腳本編程學習類網站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網頁制作、網絡編程、網站建設等編程資料。</p> </div> <div class="box"> <h2><input type="button" value="點擊淡出" /></h2> <div id="fadeOut"> <p>武林網</p> </div> <p>武林網是國內專業的網站建設資源、腳本編程學習類網站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網頁制作、網絡編程、網站建設等編程資料。</p> </div> <div class="box"> <h2><input type="button" value="點擊淡出至指定透明度" /></h2> <div id="fadeTo"> <p>武林網</p> </div> <p>武林網是國內專業的網站建設資源、腳本編程學習類網站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網頁制作、網絡編程、網站建設等編程資料。</p> </div> </div> <!--DEMO end--> </body> </html> 以上就是原生js實現淡入淡出效果的全部代碼，希望對大家的學習有所幫助。
新聞熱點
疑難解答
