找了好多，都是由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. css实现块级元素水平垂直居中的方法？

    父级给相对定位,子级给绝对定位,margin设置为auto,上下左右值设为0. 父级给相对定位,子级给绝对定位,设置left和top为50%,再向左和向上移动负的子级一半. 父级设置display:f ...

  2. vuex传递数据的流程

    当组件修改数据的时候必须通过store.dispatch来调用actions中的方法,当actions中的方法被触发的时候通过调用commit的方法来触发mutations里面的方法,mutation ...

  3. C# 全角半角字符互转

    /// <summary> /// 全角空格为12288,半角空格为32 /// 其他字符半角(33-126)与全角(65281-65374)的对应关系是:均相差65248 /// < ...

  4. 洛谷 P3806 【模板】点分治1-树分治(点分治，容斥版) 模板题-树上距离为k的点对是否存在

    P3806 [模板]点分治1 题目背景 感谢hzwer的点分治互测. 题目描述 给定一棵有n个点的树 询问树上距离为k的点对是否存在. 输入格式 n,m 接下来n-1条边a,b,c描述a到b有一条长度 ...

  5. SQL基础-游标&事务

    一.游标 1.游标简介 SQL是一种集合操作语言,但有时候需要对单行操作怎么办呢? 也就是有时候会过滤出不止一行的数据,但是想一行行的处理: ---游标 游标: 从集合中依次提取单条记录,直接提取完最 ...

  6. VxLAN原理

    VxLAN 背景介绍: 从上个世纪虚拟化技术就被提出,但由于硬件技术达不到,而没能被重视,自本世纪初硬件制造技术越来越来强,导致很多单台物理机只跑一个应用或几个应用根本无法完全使用硬件的全部性能,导致 ...

  7. 使用adb连接Mumu模拟器

    1)下载Mumu模拟器 2)运行Mumu模拟器 3)找到mumu安装目录下的MuMu\emulator\nemu\vmonitor\bin目录 4)在当前目录打开cmd,执行 adb connect ...

  8. 如果要对一些数据做处理,可以直接用自定义fliter

    {{[offer.brand, offer.series, offer.model] | carFilter}} filters里面写 carFilter ([brand, series, model ...

  9. 堆叠注入——BUUCTF-随便注

    由题目提示知道,这题需要进行sql注入 输入1'发现报错 再输入1';show batabases#出现了一大堆数据库 再输入1';show tables#出现了两个表 猜测flag在这2个表中,输入 ...

  10. SQL回顾

    数据库的本质是一种特殊的文件 数据库是由数据表组成的,数据表是真正存储数据的 数据库客户端-->SQL语句-->数据库服务器-->数据库文件 表与表之间存在关联的数据库称为关系型数据 ...