JS實現簡單的圖片透明度循環變化（漸變）

時間 2019-11-08

原文原文鏈接

找了好多，都是由100到0就結束了，到頭來本身魔改，如下就是源碼。javascript

div中加入img，js添加函數，完事（調用），取名後面加個1是爲了不衝突html

 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>

相關標籤/搜索