0.0

JS实现简单的图片透明度循环变化（渐变）

找了好多，都是由100到0就结束了，到头来自己魔改，以下就是源码。

div中加入img，js添加函数，完事（调用），取名后面加个1是为了避免冲突

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>简单透明度渐变</title>
 6 </head>
 7 
 8 <body>
 9 <div id="img_eat"  style="opacity:1;">
10     <img src="https://images.cnblogs.com/cnblogs_com/ikaros-521/1529977/o_eat.gif" id="eat" alt="" style="width: 100px;"/>
11 </div>
12 </body>
13 <script type="text/javascript">
14 window.onload = function(){
15     // 透明度来回变换
16     var timer1 = setInterval(colorLiner,20);
17     var val1 = 100;
18     function colorLiner(){
19         var Div = document.getElementById('img_eat');
20         if(val1 >= 0)
21         {
22             Div.style.opacity = val1/100;    
23         }
24         if(val1 < 0)
25         {
26             Div.style.opacity = -val1/100;
27         }
28         if(val1 == -100)//由-100变为正100
29         {
30             val1 = -val1;
31         }
32         val1--;
33     }    
34 }
35 </script>
36 </html>

 

posted @ 2019-08-20 19:27  Love丶伊卡洛斯  阅读(1558)  评论(3)  编辑  收藏  举报