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

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

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8" />

 <title>简单透明度渐变</title>

 </head>

 <body>

 <div id="img_eat"  style="opacity:1;">

     <img src="https://images.cnblogs.com/cnblogs_com/ikaros-521/1529977/o_eat.gif" id="eat" alt="" style="width: 100px;"/>

 </div>

 </body>

 <script type="text/javascript">

 window.onload = function(){

     // 透明度来回变换

     var timer1 = setInterval(colorLiner,20);

     var val1 = 100;

     function colorLiner(){

         var Div = document.getElementById('img_eat');

         if(val1 >= 0)

         {

             Div.style.opacity = val1/100;

         }

         if(val1 < 0)

         {

             Div.style.opacity = -val1/100;

         }

         if(val1 == -100)//由-100变为正100

         {

             val1 = -val1;

         }

         val1--;

     }

 }

 </script>

 </html>

JS实现简单的图片透明度循环变化（渐变）的更多相关文章

  1. JS可控制的图片自动循环播放查看效果

    JS可控制的图片自动循环播放查看效果 <html> <head> <title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</t ...

  2. js最简单焦点图片轮播代码

    将下面代码保存为banner.js,在需要显示焦点图的地方调用该js即可. <script type="text/javascript" src="banner.j ...

  3. js实现简单的图片轮播

    js代码如下 <script type="text/javascript"> var n=1; var map=new Array(); map[0]=new Imag ...

  4. 使用VIEWER.JS进行简单的图片预览

    <script src="../res/js/viewer.min.js"></script><script type="text/java ...

  5. JS实现简单的图片切换效果

    使用图片进行点击切换效果 <!doctype html> <html lang="en"> <head> <meta charset=&q ...

  6. CSS鼠标点击式变化图片透明度

    今天分享前端代码主题:jequery控制css图片透明度 很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css ...

  7. js 实现图片间隔循环轮播以及没有间隔的循环轮播

    链接地址:http://blog.sina.com.cn/s/blog_75cf5f32010199dn.html 最近做了个图片循环轮播的功能.就是几张图片不断的循环滚动显示. 感觉这个方法不错所以 ...

  8. 简单html js css 轮播图片，不用jquery

    这个是自己修改的轮播图片,在网上有的是flash 实现的轮播图片,对搜索引擎不友好, 比如:dedecms 的首页的轮播图是用flash实现滚动的. 所以这个自己修改了一下,实现html+js+css ...

  9. iscroll.js的简单使用方法（总结）

    iscroll.js的简单使用方法(总结) 一.总结 一句话总结:Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化. 最佳的HTML结构如下: <div id="wrap ...

随机推荐

  1. MySQL避免插入重复记录：唯一性约束

      mysql在存在主键冲突或者唯一键冲突的情况下,根据插入策略不同,一般有以下三种避免方法.1.insert ignore2.replace into3.insert on duplicate ke ...

  2. AtCoder Beginner Contest 137 F

    AtCoder Beginner Contest 137 F 数论鬼题(虽然不算特别数论) 希望你在浏览这篇题解前已经知道了费马小定理 利用用费马小定理构造函数\(g(x)=(x-i)^{P-1}\) ...

  3. 这可能是目前最透彻的Netty原理架构解析

    https://juejin.im/post/5be00763e51d453d4a5cf289 本文基于 Netty 4.1 展开介绍相关理论模型,使用场景,基本组件.整体架构,知其然且知其所以然,希 ...

  4. 对IT战略的认识

    提到战略,我不由想起了战术这个名词.按照我的理解,战术属于短期内的计划,是战略的组成部分,是实施次战略的短期工作计划或行动步骤:而战略是用来帮助我们赢取目标的行动计划(例如为获得更多的潜在客户而制定的 ...

  5. Quartus Prime 与 Modelsim 调试 及do文件使用

    Quartus Prime 与 Modelsim 调试 及do文件使用 2019-06-28 11:12:50 RushBTaotao 阅读数 49更多 分类专栏: IntelFPGA-Softwar ...

  6. Spring不能直接@autowired注入Static变量/ 关于SpringBoot的@Autowired 静态变量注入

    昨天在编写JavaMail工具类的时候,静态方法调用静态变量,这是很正常的操作,当时也没多想,直接静态注入. @Component public class JavaMailUtil { @Autow ...

  7. Linux如何将未分配的硬盘挂载出来

    情景说明 客户给了几台服务器,说500G硬盘,但到手操作的时候,使用命令查看,发现只有不到200的硬盘 [root@localhost ~]# df -h Filesystem Size Used A ...

  8. Golang常见小细节总结（1）

    本系列不定期更新,用于记录平常开发过程中出现的一些小问题 Array 类型的值作为函数参数    可以理解slice是对array的一个视图,底层还是array所以会被修改 通过map的ok来确 ...

  9. 没有可用的软件包 xxx，但是它被其它的软件包引用了

    在linux下apt安装软件,弹出这个错. 解决,更新下资源: sudo apt-get update

  10. Ubuntu16.04安装Consul

    1.下载安装包 https://www.consul.io/downloads.html wget https://releases.hashicorp.com/consul/1.5.3/consul ...