遮罩顏色漸變 · Javascript

![](https://box.kancloud.cn/4cd925aed77fad47178fd95e252ff188_622x283.gif) 樣式 ``` <style> #parent{ width:540px; height: 215px; position: relative; border:1px solid #000; } #parent>img{ width:500px; padding: 20px; } #fade{ width: 540px; height: 215px; position: absolute; left: 0px; top:0px; background: #4a4266; opacity: 0.4; } </style> ``` 結構 ``` <body> <div id="parent"> <img src="images/01.jpg" alt=""> <div id="fade"></div> </div> </body> ``` JS（未進行函數封裝） ``` 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 == 70){ clearInterval(timer); //停止繼續累加透明度 } else{ opacity += 2; fade.style.opacity = opacity/100; console.log(opacity); } },100) } parent.onmouseout = function(){ clearInterval(timer); timer = setInterval(function(){ if(opacity == 40){ clearInterval(timer); } else{ opacity -= 2; fade.style.opacity = opacity/100; } },100) } ``` 封裝函數 ``` parent.onmouseover = function(){ opacity_change(90,2); } parent.onmouseout = function(){ opacity_change(40,-2); } function opacity_change(reach,add){ clearInterval(timer); timer = setInterval(function(){ if(opacity == reach){ clearInterval(timer); } else{ opacity += add; console.log(opacity/100); fade.style.opacity = opacity/100; } },500) } ```