js實現鼠標移動到圖片產生遮罩效果

來源：懂視網責編：小OO 時間：2020-11-27 22:27:31

js實現鼠標移動到圖片產生遮罩效果

本文實例為大家分享了js實現鼠標移動到圖片產生遮罩效果的具體代碼，供大家參考，具體內容如下：<；<。DOCTYPE html>；<；html lang="en">；<；head>；<；meta charset="UTF-8">；<；title>；mask<；/title>；<；style>；.pic{ width：300px；height：250px；background：url(icon/product1.jpg) no-repeat；margin：40px auto；} #mask{ width：300px；height：250px；background-color： gray；opacity： 0.5。

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了js實現鼠標移動到圖片產生遮罩效果的具體代碼，供大家參考，具體內容如下：<；<。DOCTYPE html>；<；html lang="en">；<；head>；<；meta charset="UTF-8">；<；title>；mask<；/title>；<；style>；.pic{ width：300px；height：250px；background：url(icon/product1.jpg) no-repeat；margin：40px auto；} #mask{ width：300px；height：250px；background-color： gray；opacity： 0.5。

本文實例為大家分享了js實現鼠標移動到圖片產生遮罩效果的具體代碼，供大家參考，具體內容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>mask</title>
<style>
 .pic{
 width:300px;
 height:250px;
 background:url(icon/product1.jpg) no-repeat;
 margin:40px auto;
 }
 #mask{
 width:300px;
 height:250px;
 background-color: gray;
 margin:40px auto;
 opacity: 0.5;
 z-index: 1000;
 }
</style> 
</head>
<body>
 <div class="pic">
 <!-- <div id="mask"></div> -->
 </div>
</body>
<script>
 var pic=document.getElementsByClassName("pic")[0];
 var d=document.createElement("div");
 pic.onmouseenter=function(){
 // var d=document.createElement("div");
 d.id="mask";
 pic.appendChild(d);
 };
 pic.onmouseleave=function(){
 this.removeChild(d);
 }; 
</script>
</html>

效果圖：