1 <!DOCTYPE html> 2 <!-- 漸進漸出效果 --> 3 <html> 4 <head> 5 <style type="text/css"> 6 html,body{ //寫了這個后，才能在后面通過百分比設置高度，因為div是根據其上層的數據為基礎設定百分比的 7 height:100%; 8 } 9 div{ 10 border-radius:5 5 5 5; 11 -moz-border-radius: 10px; 12 -webkit-border-radius: 10px; 13 font-size: 50px; 14 } 15 16 .fadeInDiv{ 17 filter:Alpha(opacity=50); 18 opacity:0.5; 19 background:red; 20 width:10%; 21 height:100%; 22 } 23 .fadeOutDiv{ 24 filter:Alpha(opacity=50); 25 opacity:0.5; 26 background:blue; 27 width:20%; 28 height:30%; 29 } 30 </style> 31 32 <script language="javascript"> 33 function isIE(){ 34 if(navigator.userAgent.indexOf("MSIE") > 0){ 35 return true; 36 } 37 return false; 38 } 39 40 function fade(obj, type ,speed){ 41 var INTERVAL_TIME = 50; //setInterval的間隔時間 42 if( typeof speed == "undefined" ){ //如果在調用函數時沒有設置speed則設置其默認值為2 43 alert("typeof speed == 'undefined' : " + typeof speed); 44 speed = 2; 45 }else if( speed == 0 || !(/^[0-9]*$/.test(speed)) ){ //如果speed為0，或者有數字以外的字符，則返回 46 return; 47 }else{ //確保speed為正數 48 speed = ( speed > 0 ) ? speed : -(speed); 49 } 50 51 if ( type == "in" ){ //漸漸出現 52 }else if( type == "out" ){ //type漸漸消失的話，speed改為負數 53 speed = -speed; 54 }else{ 55 return; 56 } 57 58 var opa; 59 var time; 60 speed = Number(speed); 61 if(isIE()){ 62 opa = obj.style.filter; 63 //因為只有class，無法獲得class中的值，其只能從默認值開始漸變 64 opa = opa?opa.substring(opa.indexOf("=")+1,opa.indexOf(")")):0; //如果有設置filter則為其本身，否則設置其默認值為0 65 opa = Number(opa); 66 time = setInterval(function(){ 67 if(opa < 100){ 68 opa +=speed; 69 obj.style.filter = "Alpha(opacity=" + opa + ")"; 70 }else{ 71 clearInterval(time); 72 } 73 },INTERVAL_TIME); 74 }else{ 75 speed /= 100; 76 //opa = obj.style.filter; //ie不支持opacity屬性，支持filter屬性；chrome不支持filter屬性 77 //alert(opa); //彈出框中無任何數據 78 opa = obj.style.opacity?obj.style.opacity:0; 79 opa = Number(opa); 80 time = setInterval(function(){ 81 if(opa < 1){ 82 opa +=speed; 83 obj.style.opacity = opa; 84 }else{ 85 clearInterval(time); 86 } 87 },INTERVAL_TIME); 88 } 89 } 90 </script> 91 </head> 92 93 <body> 94 <div class="bottorn"> 95 <div class="fadeInDiv" onClick="fade(this, 'in', 2)"> 96 red~~ 97 </div> 98 </div> 99 <div id="out" class="fadeOutDiv" style="opacity:0.5;filter:Alpha(opacity=50);" onClick="fade(this, 'out', '10')"> 100 blue~~ 101 </div> 102 </body> 103 104 </html>
經過chrome與ie8測試