JS实现图片的淡入和淡出的两种方法,如有不足,…

2018-06-24 02:15:30来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

   今天下午练习了下这个图片的淡入淡出小demo,如有不足,还请前辈多多指导^-^~

总结如下:

第一种方法:

  个人觉得第一种方法比较好,同时兼容IE8以下浏览器,但是如下代码中,不知可不可以将timer和alpha也作为参数封装到函数内,感觉貌似也没必要 - -!......  

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             div{display:inline-block;opacity:.3;filter:alpha(opacity:30);}
 8             img{vertical-align:top;}
 9         </style>
10         <script type="text/javascript">
11             window.onload=function(){
12                 var odiv=document.getElementById("div");
13                 var timer=null;
14                 var alpha=30;
15                 var speed=1;
16                 
17                 odiv.onmouseover=function(){
18                     startChange(odiv,speed,100);
19                 }
20                 odiv.onmouseout=function(){
21                     startChange(odiv,speed,30);
22                 }
23                 function startChange(obj,speed,target){
24                     clearInterval(timer);
25                     speed=target>alpha?speed:-speed;
26                     timer=setInterval(function(){
27                         if(alpha==target){
28                             clearInterval(timer);
29                         }else{
30                             alpha+=speed;
31                         }
32                         obj.style.opacity=alpha/100;
33                         obj.style.filter="alpha(opacity:"+alpha+")";
34                     },20);
35                 }
36             }
37         </script>
38     </head>
39     <body>
40         <div id="div">
41             <img src="desert.jpg" alt="" />
42         </div>
43     </body>
44 </html>

 第二种方法:

  直接利用opacity属性,但还不支持IE8以下的浏览器。另外,在以下32行代码中,还容易出现诡异的小数问题,听说是由于计算机在处理小数的时候,本身就有些问题,但具体如何产生的,以及如何去解决,暂时还不清楚。

  还请各位前辈多多指导,我也去查查资料,嘿嘿~

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             div{display:inline-block;opacity:1;}
 8             img{display:block;}
 9         </style>
10         <script type="text/javascript">
11             window.onload=function(){
12                 var div1=document.getElementsByTagName("div")[0];
13                 var t=null;
14                 var speed=0.1;
15                 div1.onmouseover=()=>{            
16                     change(div1,speed,0.3);
17                 }
18                 div1.onmouseout=()=>{
19                     change(div1,speed,1);
20                 }
21                 function change(obj,speed,target){
22                     clearInterval(t);
23                     t=setInterval(()=>{
24                         obj.style.opacity=getComputedStyle(obj,false)["opacity"];
25                         if(obj.style.opacity==target){
26                             clearInterval(t);
27                         }else{
28                             if(target==0.3){
29                                 obj.style.opacity-=speed;
30                             }else if(target==1){
31                                 speed+=0.1;
32                                 console.log(speed);   //0.30000000000000004   会出现小数这种BUG
33                                 obj.style.opacity=speed;
34                             }
35                         }
36                     },50);
37                 }
38             }
39         </script>
40     </head>
41     <body>
42         <div>
43             <img src="desert.jpg" alt="" />
44         </div>
45     </body>
46 </html>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js实现一键导出Excel

下一篇:JavaScript --- Set 集合结构详解