js渐入渐出效果的实现

本文转载自查看原文 2013-09-09 13:11 5420 js/ js_代码练习

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 js原生实现div渐入渐出微信小程序-实现渐入渐出动画效果 vue切换组件（路由）过渡渐入渐出效果 CSS3实现图片渐入效果 css内容渐入效果实现原生js实现图片网格式渐显、渐隐效果小程序 wepy wx.createAnimation 向右滑动渐入渐出用jQuery实现渐隐渐显的返回顶部效果（附多图）移动端实现弹出框渐显和渐隐效果 Android实现渐显按钮的左右滑动效果