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测试