今天下午练习了下这个图片的淡入淡出小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. Intel超低功耗CPU的一些信息

    2015年底: Intel Braswell是专门针对超低功耗移动和桌面平台的一个家族,现有赛扬N3000/N3050/N3150.奔腾N3700四款型号,其中N300的热设计功耗只有区区4W,其他三 ...

  2. Android Studio插件之MVPHelper，一键生成MVP代码

    MVP盛行,听到的最多的抱怨就是咋要写这么多接口,那么本文作者提供了一个插件,自动生成这些接口的声明.感兴趣的还可以学习该插件的写法,按照自己平时的需求修改,提供开发效率. MVPHelper 一款I ...

  3. 软工读书笔记 week 7 ——《构建之法》

    总时长近两周的结对项目终于算是结束了,马上要重新开启团队项目.于是这几天决定对<构建之法>一书中与团队项目及需求分析有关的章节进行重点阅读,希望能够从中得到启发,并运用到接下来的团队项目中 ...

  4. shell_processing

    1.文本处理_2:grep,sed,awk 2.regular_expression 3.Test   一.文本处理_2 1.grep --Linux处理正则表达式的主要程序.正则表达式是一种符号表示 ...

  5. spring boot(14)-pom.xml配置

    继承spring-boot-starter-parent 要成为一个spring boot项目,首先就必须在pom.xml中继承spring-boot-starter-parent,同时指定其版本 & ...

  6. paramiko的安装与使用

    paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接,支持在远程登录服务器执行命令和上传下载文件的功能. 安装 pycrypto下载地址: ...

  7. oracle使用索引和不使用索引性能分析

    首先准备一张百万条数据的表,这样分析数据差距更形象! 下面用分页表数据对表进行分析,根据EMP_ID 字段排序,使用索引和不使用索引性能差距! sql查询语法准备,具体业务根据具体表书写sql语法: ...

  8. Entity Framework对同一张表配置一对多关系

    在实际的项目开发中,可能会遇到同一张表同时保存自身和上级(或下级)的信息(一般是通过设置一个上级主键[ParentId]的列与主键[Id]关系) 例如:城市库,有国家.省.市...,省的ParentI ...

  9. ZT 安卓手机的安全性 prepare for Q

    如何增强安卓手机的安全性?安卓的安全性太低了!!! 众所周知,安卓手机是非常容易破解的,刷过机的人都知道,不管你之前在手机怎么设置密码,只要进入recovery清空使用记录,手机就会恢复出厂设置,到时 ...

  10. Hadoop HA on Yarn——集群配置

    集群搭建 因为服务器数量有限,这里服务器开启的进程有点多: 机器名 安装软件 运行进程 hadoop001 Hadoop,Zookeeper NameNode, DFSZKFailoverContro ...