找了好多，都是由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. 6-网页,网站,微信公众号基础入门(PHP学习_1)

    https://www.cnblogs.com/yangfengwu/p/11037675.html 安装PhpStrom http://www.jetbrains.com/phpstorm/ 然后百 ...

  2. 机器学习之决策树原理和sklearn实践

    1. 场景描述 时间:早上八点,地点:婚介所 '闺女,我有给你找了个合适的对象,今天要不要见一面?' '多大?' '26岁' '长的帅吗?' '还可以,不算太帅' '工资高吗?' '略高于平均水平' ...

  3. ffmpeg结合SDL编写播放器（一）

    ffmpeg 工具是一个高效快速的命令行工具,进行视音频不同格式之间的转换. ffmpeg命令行 ffmpeg可以读取任意数量的输入“文件”(可以是常规文件,管道,网络流,抓取设备等)读取,由 -i ...

  4. Sherlock and His Girlfriend（信息学奥赛一本通 1623）

    [题目描述] 原题来自:Codeforces Round #400 B. Sherlock 有了一个新女友(这太不像他了!).情人节到了,他想送给女友一些珠宝当做礼物. 他买了 n 件珠宝.第 i 件 ...

  5. 在Visual　Studio中直接编译Fluent的UDF(修正)

    原文见:http://blog.sina.com.cn/s/blog_14d64daa10102xkg4.html 主要是修正几个问题: 首先是头文件填入的顺序需要严格按照我前文给出的顺序填写,否则可 ...

  6. mysql根据关键词查询匹配多个字段时结果不正确

    一开始的写法 SELECT rrc.id, rrc.resource_name rrc.is_publish FROM res_resource_catalog AS rrc <where> ...

  7. java和vue2.0

    1 java中的el表达式${对象.属性}和vue中的双向数据绑定{{mode.xx}}感觉有点类似 2 java中  request.setAttribute("hots", l ...

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

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

  9. input file上传文件弹出框的默认格式设置

    我们使用html的input 标签type="flie"时,如何设置默认可选的文件格式 <input id="doc_file" type="f ...

  10. easyui的datagrid的使用记录

    datagrid是在 table的基础上变化而来的, 而不是在div的基础上来的. 从div来变成 datagrid,样式的设置还是是比较麻烦的. dg=datagrid 的标题 来源于 column ...