suchen

Heim >Web-Frontend >js-Tutorial >JS-Codebeispiel zur Implementierung des Maskeneffekts, wenn die Maus auf dem Bild platziert wird

JS-Codebeispiel zur Implementierung des Maskeneffekts, wenn die Maus auf dem Bild platziert wird

黄舟
黄舟Original
2017-10-21 10:10:352292Durchsuche

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ist JavaScript eine OOP-Sprache?Nächster Artikel：Ist JavaScript eine OOP-Sprache?

In Verbindung stehende Artikel

Mehr sehen