淡入淡出图片

最新推荐文章于 2020-03-18 22:31:21 发布

原创最新推荐文章于 2020-03-18 22:31:21 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现的图片透明度交互效果。当鼠标悬停在图片上时，图片会逐渐变得完全不透明，鼠标移开后则逐渐恢复到半透明状态，以此增强用户体验。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
      img{
         filter :alpha(opacity:30);
         opacity:0.3;
      }

   </style>
</head>
<body>
   <script>
   window.onload=function () {
     var timer=null;
     var alpha=30;
     var img=document.getElementById('img1');
     function startMove(target){
          clearInterval(timer);
        timer=setInterval(function(){
            var speed=0;
         if(alpha<target){
             speed=10;
         }else{
             speed=-10;
           };
         if(alpha==target){
             clearInterval(timer);
         }else{
             alpha+=speed;
             img.style.filter='alpha(opacity:"+alpah+")';
             img.style.opacity=alpha/100;
         }
        },30)
      }

        img.addEventListener('mouseover',function(){
         startMove(100)},false);
        img.addEventListener('mouseout',function(){
            startMove(30)},false);

    }

   </script>
   <img src="pic1.png"  id='img1' alt="">
</body>
</html>