~~~
<style>
#parent{
margin: 50px auto;
width: 400px;
height: 300px;
padding: 20px;
border: 1px solid #333;
position: relative;
}
img{
width: 100%;
height: 100%;
}
#fade{
width: 100%;
height: 100%;
position: absolute;
background: rgb(104, 100, 100);
opacity: 0.3;
left: 0;
top: 0;
z-index: 20;
}
</style>
<div id="parent">
<img src="添加一張圖片" alt="">
<div id="fade"></div>
</div>
<script>
var parent = document.getElementById("parent");
var fade = document.getElementById("fade");
var opacity = getComputedStyle(fade).opacity*100;
var timer;
parent.onmouseover = function(){
clearInterval(timer);
timer = setInterval(function(){
if(opacity>60){
clearInterval(timer);
}else{
opacity+=2;
fade.style.opacity = opacity/100;
}
},50)
}
parent.onmouseout = function(){
clearInterval(timer);
timer = setInterval(function(){
if(opacity<30){
clearInterval(timer);
}else{
opacity-=2;
fade.style.opacity = opacity/100;
}
},50)
}
/*
方法封裝
function animate(reach,add){
clearInterval(timer);
timer = setInterval(function(){
if(opacity == reach){
clearInterval(timer);
}else{
opacity += add;
fade.style.opacity = opacity/100;
}
},50)
}
*/
</script>
~~~
