zoukankan      html  css  js  c++  java
  • JS实现简单的图片透明度循环变化(渐变)

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

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

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 <meta charset="utf-8" />
     5 <title>简单透明度渐变</title>
     6 </head>
     7 
     8 <body>
     9 <div id="img_eat"  style="opacity:1;">
    10     <img src="https://images.cnblogs.com/cnblogs_com/ikaros-521/1529977/o_eat.gif" id="eat" alt="" style=" 100px;"/>
    11 </div>
    12 </body>
    13 <script type="text/javascript">
    14 window.onload = function(){
    15     // 透明度来回变换
    16     var timer1 = setInterval(colorLiner,20);
    17     var val1 = 100;
    18     function colorLiner(){
    19         var Div = document.getElementById('img_eat');
    20         if(val1 >= 0)
    21         {
    22             Div.style.opacity = val1/100;    
    23         }
    24         if(val1 < 0)
    25         {
    26             Div.style.opacity = -val1/100;
    27         }
    28         if(val1 == -100)//由-100变为正100
    29         {
    30             val1 = -val1;
    31         }
    32         val1--;
    33     }    
    34 }
    35 </script>
    36 </html>
  • 相关阅读:
    Git常用操作命令
    百度地图集成--二
    百度地图的集成--超详细
    iOS开发系列--地图与定位
    整理了一份React-Native学习指南(转)
    iOS高级编程之JSON,XML数据解析
    iOS开发基础
    C#001
    C#00
    英语学习tips
  • 原文地址:https://www.cnblogs.com/ikaros-521/p/11385049.html
Copyright © 2011-2022 走看看