JS实现简单的图片透明度循环变化（渐变）
程序员文章站
2022-12-21 11:03:04
找了好多，都是由100到0就结束了，到头来自己魔改，以下就是源码。 div中加入img，js添加函数，完事（调用），取名后面加个1是为了避免冲突 ......
找了好多，都是由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>
上一篇： java中JDBC是什么？