找了好多，都是由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. 使用mustache 做为docker容器运行动态配置工具

    很多时候我们需要在启动容器的时候基于配置文件运行,如果在配置比较简单的时候我们可以通过环境变量 注入,同时当前12 factors 越来越融入大家的开发中了(对于配置通过环境变量处理),但是好多老的软 ...

  2. Linux 检测 tls

    检测 tls # openssl s_client -connect intl.jdair.net: -tls1

  3. 用于C＃的极速序列化/反序列工具 MessagePack

    MessagePack 比MsgPack-Cli快10倍,并且优于其他C#序列化器.MessagePack for C#还内置了对LZ4压缩的支持 - 一种极快的压缩算法.对于性能追求很重要,特别是在 ...

  4. A1136 | 字符串处理、大整数运算

    题目链接: https://www.patest.cn/contests/pat-a-practise/1136 今天是12月17号.最近这几天都有点不在状态.已经整整一周没有练算法了,自从12.3考 ...

  5. AttributeError: module ‘select’ has no attribute 'epoll’

    场景:mac 下导入的 ‘select’ 包 import select,然后在 主函数 中创建的 epoll 对象 epl = select.epoll(),运行报错如下 Traceback (mo ...

  6. [原创]Android Monkey测试工具使用介绍

    [原创]Android Monkey测试工具使用介绍 1 Android Monkey介绍 Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它向系统发送伪随机的用户事件 ...

  7. Mysql中联合索引的最左匹配原则(百度)

    创建联合索引时列的选择原则 经常用的列优先(最左匹配原则) 离散度高的列优先(离散度高原则) 宽度小的列优先(最少空间原则) 在Mysql建立多列索引(联合索引)有最左前缀的原则,即最左优先.如果我们 ...

  8. Java finally未被执行的情况

    一种是先执行了用于终止程序的System.exit()方法,或进程被关闭 还有一种情况是,当前线程一直在执行,在一些业务逻辑里面跳不出来,看上去就像finally一直未被执行 线程被终止的时候也会执行 ...

  9. 搭建基于 Anaconda 管理的多用户 JupyterHub 平台

    搭建基于 Anaconda 管理的多用户 JupyterHub 平台 情况:计算工作站放在实验室,多个同学需要接入使用,且需要各自独立的环境,并使用 Jupyter notebook 平台以方便协作. ...

  10. centos7安装yum

    由于不小心把自带的yum给卸载了,卸载命令:rpm -qa yum: 在浏览器打开链接:http://mirrors.163.com/centos/6/os/x86_64/Packages/下载这四个 ...