今天下午练习了下这个图片的淡入淡出小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. JAVA视频网盘分享

    JAVA视频网盘分享 [涵盖从java入门到深入架构,Linux.云计算.分布式.大数据Hadoop.ios.Android.互联网技术应有尽有] 1.JavaScript视频教程 链接: http: ...

  2. 朴素贝叶斯文本分类实现 python cherry分类器

    贝叶斯模型在机器学习以及人工智能中都有出现,cherry分类器使用了朴素贝叶斯模型算法,经过简单的优化,使用1000个训练数据就能得到97.5%的准确率.虽然现在主流的框架都带有朴素贝叶斯模型算法,大 ...

  3. Android组件系列----Activity的生命周期

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  4. viedo formats vs file formats

    web的视频世界,有两个概念非常容易搞混淆,即:视频文件的格式,比如.mp4,.flv,.ogv等等,以及视频本身的格式,就是指的codec算法名称,比如h.264,mpeg-4等. http://w ...

  5. mvc 下json超过限制，上传excel大小限制

    json超过限制 解决方案1:config中添加节点  控制序列化长度 <webServices> <jsonSerialization maxJsonLength="10 ...

  6. Linux查看系统当前字符集

    常用的命令展示 参考当前环境的字符集 方法一: cat /etc/sysconfig/i18n [ssh客户端工具最好也是utf-8,保持一致] 方法二:echo $LANG 设置当前环境的字符集 方 ...

  7. Linux配置自动发送邮件

    需要的工具:sendEmail 和 linux自带的定时工具:crontab 1.sendEmail的使用: 具体参数解释: -f zhangshibo706@163.com 发件人邮箱 -t 453 ...

  8. 解决由于显卡驱动BUG导致桌面右键卡顿的问题:bat文件源码

    @ ECHO OFF%1 mshta vbscript:CreateObject("Shell.Application").ShellExecute("cmd.exe&q ...

  9. jQuery: 刨根问底 attr and prop两个函数的区别

    In this short post I will explain the difference between attributes and properties in HTML. The .pro ...

  10. Php发送post请求方法

    因为自己时常用到 所以还是发布一下吧 /** * 发送post请求 * @param string $url 请求地址 * @param array $post_data post键值对数据 * @r ...