今天下午练习了下这个图片的淡入淡出小demo，如有不足，还请前辈多多指导^-^~

总结如下：

第一种方法：

　　个人觉得第一种方法比较好，同时兼容IE8以下浏览器，但是如下代码中，不知可不可以将timer和alpha也作为参数封装到函数内，感觉貌似也没必要 - -!......　　

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             div{display:inline-block;opacity:.3;filter:alpha(opacity:30);}

             img{vertical-align:top;}

         </style>

         <script type="text/javascript">

             window.onload=function(){

                 var odiv=document.getElementById("div");

                 var timer=null;

                 var alpha=30;

                 var speed=1;

                 odiv.onmouseover=function(){

                     startChange(odiv,speed,100);

                 }

                 odiv.onmouseout=function(){

                     startChange(odiv,speed,30);

                 }

                 function startChange(obj,speed,target){

                     clearInterval(timer);

                     speed=target>alpha?speed:-speed;

                     timer=setInterval(function(){

                         if(alpha==target){

                             clearInterval(timer);

                         }else{

                             alpha+=speed;

                         }

                         obj.style.opacity=alpha/100;

                         obj.style.filter="alpha(opacity:"+alpha+")";

                     },20);

                 }

             }

         </script>

     </head>

     <body>

         <div id="div">

             <img src="desert.jpg" alt="" />

         </div>

     </body>

 </html>

第二种方法：

　　直接利用opacity属性，但还不支持IE8以下的浏览器。另外，在以下32行代码中，还容易出现诡异的小数问题，听说是由于计算机在处理小数的时候，本身就有些问题，但具体如何产生的，以及如何去解决，暂时还不清楚。

　　还请各位前辈多多指导，我也去查查资料，嘿嘿~

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             div{display:inline-block;opacity:1;}

             img{display:block;}

         </style>

         <script type="text/javascript">

             window.onload=function(){

                 var div1=document.getElementsByTagName("div")[0];

                 var t=null;

                 var speed=0.1;

                 div1.onmouseover=()=>{

                     change(div1,speed,0.3);

                 }

                 div1.onmouseout=()=>{

                     change(div1,speed,1);

                 }

                 function change(obj,speed,target){

                     clearInterval(t);

                     t=setInterval(()=>{

                         obj.style.opacity=getComputedStyle(obj,false)["opacity"];

                         if(obj.style.opacity==target){

                             clearInterval(t);

                         }else{

                             if(target==0.3){

                                 obj.style.opacity-=speed;

                             }else if(target==1){

                                 speed+=0.1;

                                 console.log(speed);   //0.30000000000000004   会出现小数这种BUG

                                 obj.style.opacity=speed;

                             }

                         }

                     },50);

                 }

             }

         </script>

     </head>

     <body>

         <div>

             <img src="desert.jpg" alt="" />

         </div>

     </body>

 </html>

随机推荐

  1. How to work with the snap environment

    How to work with the snap environment SummaryThe snap environment manages snap agents and snap toler ...

  2. the cause of StringBuild class

    如果我们对字符串进行拼接操作,每次拼接,都会创建一个新的String对象,既耗时,又浪费空间,而StringBuild类可以解决这个问题. 那么StringBuild类是如果解决的呢? 因为Strin ...

  3. 612.1.004 ALGS4 | Elementary Sorts - 基础排序算法

    sublime编辑器写代码,命令行编译 减少对ide的依赖//可以提示缺少什么依赖import 所有示例代码动手敲一遍 Graham's Scan是经典的计算几何算法 shffule 与 map-re ...

  4. jedis spring集成

    jedis spring集成把jedis的核心对象交给spring管理.jedis核心对象:配置文件.连接池配置对象.连接池.集成方式有两种:spring-data-redis:自己封装 前提:要有一 ...

  5. mysql 命令行查看数据库、创建数据库、选择数据库、删除数据库

    mysql数据库命名规则(标识符规则): 不能和已存在的命名重名: 由大小写字母.数据.下划线.@.# 和 $ 符号组成: 首字母不能是数字和$符. 不允许有空格和特殊字符. 不允许是mysql的保留 ...

  6. Object、String、数组的 toString() 方法和 equals() 方法及java.util.Arrays

    public class Test { public static void main(String[] args) { int[] a = {1, 2, 4, 6}; int[] b = a; in ...

  7. [VS2015] [asp.net] 允许远程访问本机正在DEBUG的服务

    一.打开并编辑解决方案目录(不是工程目录)下的文件: \.vs\config\applicationhost.config 增加黑体行: <site name="XXXX" ...

  8. C# 实现水印

    直接上源码 public class WaterTextBox : TextBox { //private const int EM_SETCUEBANNER = 0x1501; //[DllImpo ...

  9. [翻译] GCDObjC

    GCDObjC https://github.com/mjmsmith/gcdobjc GCDObjC is an Objective-C wrapper for the most commonly ...

  10. [翻译] USING GIT IN XCODE [2] 在XCODE中使用GIT[2]

    USING GIT IN XCODE http://www.cimgf.com/2013/12/10/using-git-in-xcode/ USING AN EXISTING REMOTE PROJ ...