JS实现鼠标移入图片的淡入和淡出的效果两种方法
时间：4年前 阅读：5936
我们在网站开发中有时会遇到图片淡入淡出效果这样的需求，我们首先来看下图片刚开始处于模糊状态的样子：
接下来，我们把鼠标放到图片上，我们便可以看到图片由模糊逐渐变的清晰，最后如下图所示：
第一种方法：
个人觉得第一种方法比较好，同时兼容IE8以下浏览器，但是如下代码中，不知可不可以将timer和alpha也作为参数封装到函数内，感觉貌似也没必要 - -!......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{display:inline-block;opacity:.3;filter:alpha(opacity:30);}
img{vertical-align:top;}
</style>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById("div");
var timer=null;
var alpha=30;
var speed=1;
odiv.onmouseover=function(){
startChange(odiv,speed,100);
}
odiv.onmouseout=function(){
startChange(odiv,speed,30);
}
function startChange(obj,speed,target){
clearInterval(timer);
speed=target>alpha?speed:-speed;
timer=setInterval(function(){
if(alpha==target){
clearInterval(timer);
}else{
alpha+=speed;
}
obj.style.opacity=alpha/100;
obj.style.filter="alpha(opacity:"+alpha+")";
},20);
}
}
</script>
</head>
<body>
<div id="div">
<img src="https://www.qiquanji.com/data/img/dmj/201904021554216280818610.jpg" alt="" />
</div>
</body>
</html>
第二种方法：
直接利用opacity属性，但还不支持IE8以下的浏览器。另外，在以下32行代码中，还容易出现诡异的小数问题，听说是由于计算机在处理小数的时候，本身就有些问题，但具体如何产生的，以及如何去解决，暂时还不清楚。(但我用火狐浏览器和360浏览器没看到这个BUG，也只是听说而已)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{display:inline-block;opacity:1;}
img{display:block;}
</style>
<script type="text/javascript">
window.onload=function(){
var div1=document.getElementsByTagName("div")[0];
var t=null;
var speed=0.1;
div1.onmouseover=()=>{
change(div1,speed,0.3);
}
div1.onmouseout=()=>{
change(div1,speed,1);
}
function change(obj,speed,target){
clearInterval(t);
t=setInterval(()=>{
obj.style.opacity=getComputedStyle(obj,false)["opacity"];
if(obj.style.opacity==target){
clearInterval(t);
}else{
if(target==0.3){
obj.style.opacity-=speed;
}else if(target==1){
speed+=0.1;
console.log(speed); //0.30000000000000004 可能会出现小数这种BUG，但我用火狐浏览器和360浏览器没看到有BUG
obj.style.opacity=speed;
}
}
},50);
}
}
</script>
</head>
<body>
<div>
<img src="https://www.qiquanji.com/data/img/dmj/201904021554216280818610.jpg" alt="" />
</div>
</body>
</html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论