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

来源：互联网发布：linux修改ssh端口号编辑：程序博客网时间：2024/06/10 07:18

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

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

那么这样的效果，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>

0 0