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 @   Love丶伊卡洛斯  阅读(1562)  评论(3编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾(3.3-3.9)
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
欢迎阅读『JS实现简单的图片透明度循环变化(渐变)』
点击右上角即可分享
微信分享提示