用js實現div的淡入淡出
阿新 • • 發佈：2019-01-31
<style>
#box{
width:100px;height:100px;background:red;opacity:0.3;position:absolute;
}
</style>
<body>
<div id="box"></div>
</body>
<script>
var oDiv=document.getElementById("box");
var alpha=0.3;
var timer;
oDiv.onmouseover=function(){
fadeInOut(0.01);
}
oDiv.onmouseout=function(){
fadeInOut(-0.01);
}
//經驗之談：當你發現兩個函式大體一致的情況下，哪個不同就把哪個提為引數
function fadeInOut(value){
clearInterval(timer);
timer=setInterval(
function(){
alpha+=value;
oDiv.style.opacity=alpha;
if(alpha>=1||alpha<=0.3){
clearInterval(timer);
}
},30);
}
</script>