zoukankan      html  css  js  c++  java
  • [Js]淡入淡出的图片

    效果:鼠标移入时,图片由半透明逐渐变成清晰,移出时,由清晰变为半透明

    分析:用变量来储存透明度,因为元素.style.alpha不能直接增加或减少

    window.onload=function(){

        var oDiv=document.getElementById("div1");

        var timer=null;

        var alpha=30;

        oDiv.onmouseover=function(){

            setAlpha(100);

        };

        oDiv.onmouseout=function(){

            setAlpha(30);

        };

        function setAlpha(iTarget){    //iTarget目标透明度通过参数传入

            clearInterval(timer);        //执行计时器之前,先清除计时器,否则执行完一次再执行,上次的计时器还在,会不停抖动

            timer=setInterval(function(){

                var iSpeed;

                if(alpha<iTarget)

                {

                    iSpeed=10;

                }

                else

                {

                    iSpeed=-10;

                }

         if(alpha==iTarget)

         {

             clearInterval(timer);

         }

         else

         {

           alpha+=iSpeed;

           oDiv.style.opacity=alpha/100;

           oDiv.style.filter='alpha(opacity:'+alpha+')'

         }

            },30);

        };

    };

  • 相关阅读:
    03.redis集群
    02.redis数据同步
    01.redis数据类型
    06.MySQL主从同步
    05.MySQL优化
    04.MySQL慢查询
    lamp服务器站点目录被植入广告代码
    tar命令简单用法
    linux基础优化
    Linux 思想与法则
  • 原文地址:https://www.cnblogs.com/zhangwenkan/p/3608195.html
Copyright © 2011-2022 走看看