淡入淡出图片

最新推荐文章于 2021-04-07 17:34:36 发布

Apress92

最新推荐文章于 2021-04-07 17:34:36 发布

阅读量264

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/bin1813/article/details/53513099

版权

javascript 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

<!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>

Apress92

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
淡入淡出图片

html>html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style> img{ filter :alpha(opacity:30); opacity:0.3; } style>head>body> script>
复制链接

扫一扫