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);

        };

    };

  • 相关阅读:
    知识点整理
    NGINX 内存池有感
    NGINX怎样处理惊群的
    NGINX 定时器
    制作linux内核安装包
    ES6变量的解构赋值
    jquery uploadify上传插件用法心得
    【转贴】J2EE中的13种技术规范
    【转帖】Servlet 3.0 新特性详解
    汉诺塔问题的一个C#实现
  • 原文地址:https://www.cnblogs.com/zhangwenkan/p/3608195.html
Copyright © 2011-2022 走看看