智能社JS实现图片淡入淡出效果

最新推荐文章于 2019-08-18 10:06:03 发布

在京奋斗者

最新推荐文章于 2019-08-18 10:06:03 发布

阅读量2k

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/u012453843/article/details/52016360

版权

学习笔记专栏收录该内容

93 篇文章 2 订阅

订阅专栏

我们在网站开发中有时会遇到图片淡入淡出效果这样的需求，我们首先来看下图片刚开始处于模糊状态的样子：

接下来，我们把鼠标放到图片上，我们便可以看到图片由模糊逐渐变的清晰，最后如下图所示：

那么这样的效果，JS怎么做到的呢，下面我粘出HTML、CSS及JS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{width:400px;height:320px;}
        #div1 img{filter:alpha(opacity:30);opacity:0.3}

    </style>
    <script>
        var opacityNum=30;
        var timer=null;
        window.onload=function () {
            var oDiv=document.getElementById("div1");
            oDiv.onmouseover=function () {
                startMove(100);
            }
            oDiv.onmouseout=function () {
                startMove(30);
            }
        };
        function startMove(iTarget) {
            var oImg=document.getElementById("div1").getElementsByTagName("img")[0];
            var speed;
            if(opacityNum<iTarget){
                speed=10;
            }else{
                speed=-10;
            }
            clearInterval(timer);
            timer=setInterval(function () {
                if(opacityNum==iTarget){
                    clearInterval(timer);
                }else{
                    opacityNum+=speed;
                    oImg.style.filter='alpha(opacity:'+opacityNum+')';
                    oImg.style.opacity=opacityNum/100;
                }
            },30);
        }
    </script>
</head>
<body>
<div id="div1"><img src="img/5.jpg"></div>
</body>
</html>