点击按钮触发事件使遮罩层逐渐变透明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img { width: 430px; height: 280px; } div { width: 1600px; height: 300px; background-color: black; position: absolute; left: 4px; top: 4px; } input { position: absolute; left: 0; bottom: -20px; } </style> </head> <body> <img src="img/lzz3.jpg" alt="" /> <img src="img/lzz5.jpg" alt="" /> <img src="img/lzz4.jpg" alt="" /> <div id="div"> <input type="button" value="变透明" id="btn" /> </div> <script src="common.js"></script> <script> //注册点击事件，添加事件处理函数 function zy$(id) { return document.getElementById(id) }; zy$("btn").onclick = function () { var opacity = 10; var timeId = setInterval(function () { opacity--; zy$("div").style.opacity = opacity / 10; if (opacity <= 0) { clearInterval(timeId); } }, 100) } </script> </body> </html>