今天下午练习了下这个图片的淡入淡出小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. Android 仿美团网，探索使用ViewPager+GridView实现左右滑动查看更多分类的功能

    看下效果图,自己考虑下自己会如何实现,然后再继续看看作者的实现~ 不记得什么时候,我留意到到美团网首页有使用ViewPager+GridView实现左右滑动查看更多分类的一个功能,感觉它很有趣,于是想 ...

  2. 润乾报表在proxool应用下的数据源配置

     大多数应用会使用proxool数据连接池,proxool.xml的配置文件如下: <?xml version="1.0″ encoding="UTF-8″?> & ...

  3. redis 命令select、dbsize、清空数据库、info、client

    select 切换库 dbsize 当前库中数据条数 清空数据库 flushdb | flushall 清空数据,一个是清空当前库,一个清空当前实例 查看服务器及redis相关信息 infoinfo ...

  4. 【Python】Java程序员学习Python（一）— 为什么学习Python

    现在是6月份,毕业快3年了,虽然不能说对Java掌握的程度达到了如火纯青的地步,但是依然感觉到了瓶颈期,Java用的多了,也到了随心所欲的地步了,所以学第二门语言的想法一直在我脑海里闪现,有想法了就要 ...

  5. 如何让你的Ssh连接,更加安全?

    希望你会涨姿势. First: vim /etc/ssh/sshd_config 在Port 22下面加一行,以端口1438为例,Port 1438 然后保存,重启ssh服务 systemctl re ...

  6. Vue2学习笔记:实例

    1.实例 <!DOCTYPE html> <html> <head> <title></title> <script src=&quo ...

  7. Oracle GoldenGate OGG管理员手册（较早资料）

    第一章 系统实现简述 前言 编写本手册的目的是为系统管理员以及相关操作人员提供 Oracle  Goldengat  软 件的日常维护和使用的技术参考: 3 ORACLE 第二章 OGG 日常维护操作 ...

  8. 用标签页TitleSwitch切换不通的控制器

    用标签页TitleSwitch切换不通的控制器 教程效果: 项目开发中效果: 各种源码: TitleSwitch.h 与 TitleSwitch.m (这个是修改过的升级版本) // // Title ...

  9. 铁乐学python_Day42_线程-信号量事件条件

    铁乐学python_Day42_线程-信号量事件条件 线程中的信号量 同进程的一样,Semaphore管理一个内置的计数器, 每当调用acquire()时内置计数器-1:调用release() 时内置 ...

  10. mode="r" 和 函数末尾调用 regist()!!!!

    def regist(): f = open(r"G:\课件\day09 初始函数\code\day009 初始函数\account", mode="r", e ...