Heim > Artikel > Web-Frontend > JS-Codebeispiel zur Implementierung des Maskeneffekts, wenn die Maus auf dem Bild platziert wird
Das Beispiel in diesem Artikel teilt Ihnen den spezifischen JS-Code mit, um den Maskierungseffekt zu erzielen, indem Sie die Maus zu Ihrer Referenz auf das Bild bewegen. Der spezifische Inhalt ist wie folgt:
<!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> <p class="pic"> <!-- <p id="mask"></p> --> </p> </body> <script> var pic=document.getElementsByClassName("pic")[0]; var d=document.createElement("p"); pic.onmouseenter=function(){ // var d=document.createElement("p"); d.id="mask"; pic.appendChild(d); }; pic.onmouseleave=function(){ this.removeChild(d); }; </script> </html>
Rendering:
Das obige ist der detaillierte Inhalt vonJS-Codebeispiel zur Implementierung des Maskeneffekts, wenn die Maus auf dem Bild platziert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!