找了好多，都是由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. kafk设计要点

    kafka的设计目标是高吞吐量,所以kafka自己设计了一套高性能但是不通用的协议,他是仿照AMQP( Advanced Message Queuing Protocol   高级消息队列协议)设计的 ...

  2. 动态规划-多维DP

    1.最大正方形 我的瞎猜分析: 我的瞎猜算法: #include <stdio.h> #include <memory.h> #include <math.h> # ...

  3. 洛谷/SPOJ SP3267 题解

    若想要深入学习主席树,传送门. Description: 给定数列 \(\{a_n\}\) ,求闭区间 \([l,r]\) 的互异的个数. Method: 扫描序列建立可持续化线段树,若此元素是第一次 ...

  4. GoCN每日新闻(2019-10-27)

    GoCN每日新闻(2019-10-27) 1. Golab(意大利GopherCon)2019见闻 http://fedepaol.github.io/blog/2019/10/23/golab-20 ...

  5. 二分法递归版本（c++）

    利用二分法求解在区间[0,π/2]上的根 #include<iostream> #include <cmath> using namespace std; double dic ...

  6. 《JAVA程序设计》_第十一周学习总结

    一.学习内容 13.1 URL类 URL类是java.net包中的一个重要的类,URL的实例封装着一个统一资源定位符,使用URL创建对象的应用程序称作客户端程序. 一个URL对象包含的三个基本信息:协 ...

  7. NioEventLoopGroup源码分析与线程设定

    我的以Netty Socket编程的代码为例, 1.EventLoopGroup 进入EventLoopGroup,这是一个特殊的EventExecutorGroup,在事件循环中,在selectio ...

  8. 【深入学习linux】CentOS 7 最小化安装后的注意事项及一些必备组件的安装

    转载:https://blog.csdn.net/F_Srion/article/details/54910943 在VM虚拟机中安装CentOS 7 时 有时候顾虑到电脑硬件性能,我们需要最小化安装 ...

  9. Mysql 查询今天，这周，这个月，今年的数据

    今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ...

  10. jmeter beanshell 从文件中获取随机参数

    loadruner 参数化有个功能,可以设置在脚本每次出现参数时,自动更换参数值.在做jmeter自动化测试过程中,同一个请求中出现多个参数值,如一个接口可以添加n个信息的请求 [ { "n ...