今天下午练习了下这个图片的淡入淡出小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. Ubuntu下卸载QT5.7.1再重装

    /**** 卸载QT5.7.1 *****/ .首先找到QT安装文件的位置,例如我的在/home/ttwang/software/qt5.7.1 .终端输入命令进入该目录,输入命令: ./Mainte ...

  2. Spring 框架学习—控制反转（IOC）

        Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson创建. 简单来说,Spring是一个分层的JavaSE/EEfull-st ...

  3. PHP isset()与empty()的使用区别

    PHP的isset()函数 一般用来检测变量是否设置 格式:bool isset ( mixed var [, mixed var [, ...]] ) 功能:检测变量是否设置 返回值: 若变量不存在 ...

  4. Android SimpleAdapter的参数

    1.作用是ArrayList和 ListView的桥梁.这个ArrayList里边的每一项都是一个Map<String,?>类型.       ArrayList当中的每一项 Map对象都 ...

  5. 一种特殊场景下的HASH JOIN的优化为NEST LOOP.

    应用场景: 有如下的SQL: select t.*, t1.ownerfrom t, t1where t.id=t1.id; 表t ,t1的数据量比较大,比如200W行.但是两张表能关联的行数却很少, ...

  6. windows 命令行使用p4

    首先,p4的命令行真的恶心,要不是非要用我一定换成git(逃) 参考网站:https://www.perforce.com/manuals/v15.1/cmdref/p4_add.html 全程尝试各 ...

  7. 通过代码管理工具 git 完成一次完整的代码管理过程

    1.从公共远程fork一份自己的本地远程之后,从本地远程 clone 到本地 2.将本地代码跟公共远程代码做关联配置 git remote add upstream https://github.co ...

  8. spring boot(11)-druid监控

    druid druid是和tomcat jdbc一样优秀的连接池,出自阿里巴巴.关于druid连接池参数,参考 https://github.com/alibaba/druid/wiki/DruidD ...

  9. 本地sql大文件导入数据库

    mysql中配置my.ini interactive_timeout = 120 wait_timeout = 120 max_allowed_packet = 32M 导入sql运行命令 sourc ...

  10. ExpressRoute 路由要求

    若要使用 ExpressRoute 连接到 Azure 云服务,需要设置并管理路由.某些连接服务提供商以托管服务形式提供路由的设置和管理.请咨询连接服务提供商,以确定他们是否提供此类服务.如果不提供, ...