用js实现div的淡入淡出

<style>

#box{

                 width:100px;height:100px;background:red;opacity:0.3;position:absolute;

}

</style>

<body>

      <div id="box"></div>

</body>

<script>

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

     var alpha=0.3;

     var timer;

     oDiv.οnmοuseοver=function(){

          fadeInOut(0.01);

     }

     oDiv.οnmοuseοut=function(){

          fadeInOut(-0.01);

     }

//经验之谈:当你发现两个函数大体一致的情况下,哪个不同就把哪个提为参数

function fadeInOut(value){

        clearInterval(timer);

        timer=setInterval(

        function(){

              alpha+=value;

              oDiv.style.opacity=alpha;

              if(alpha>=1||alpha<=0.3){

              clearInterval(timer);

             }

       },30);

}

 

 

</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值