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

        };

    };

  • 相关阅读:
    mysql分表+查询
    mysql 数据库 分表后 怎么进行分页查询?Mysql分库分表方案?
    mysql 索引失效的情况
    mysql 索引 最左前缀原则
    redis同时操作多个key set get del 呢?mset mget pipeline
    mysql唯一索引和普通索引的选择和区别
    那些php面试官的问题
    php快速排序
    PHP抽象类与接口的区别
    php session
  • 原文地址:https://www.cnblogs.com/zhangwenkan/p/3608195.html
Copyright © 2011-2022 走看看