Exemple de code d'analyse du bouton de clic js pour implémenter un effet vidéo contextuel avec une couche de masque

Cet article présente principalement le jscliquer sur le bouton pour obtenir l'effet pop-up vidéo avec un calque de masque. Les amis qui en ont besoin peuvent se référer au

exemple de cet article. js clique sur le bouton pour réaliser l'effet vidéo pop-up avec un calque de masque, qui implique du CSS et du

JavaScript Je le partage avec vous pour votre référence.

L'effet d'affichage final : cliquez sur le bouton rouge, et il apparaîtra. Un écran vidéo apparaîtra avec un calque de masque

Cliquez sur la zone jaune pour fermer vidéo et revenir à l'état d'origine.

Code principal de la page : main contient principalement un a, qui contrôle le bouton affiché. Définir avec la valeur d'identification.

<p class="main">
  <a href="javascript:;" class="video" id="video"></a>
</p>

Le code suivant est utilisé pour contrôler l'effet d'affichage de la vidéo. .video-btn inclut la zone d'affichage vidéo et le bouton de fermeture jaune à droite (bien que le bouton de fermeture jaune soit un peu moche). ).

id="shadow" est utilisé pour contrôler le calque du masque. L'essentiel est de définir la valeur id de chaque élément, puis js peut facilement appeler chaque élément.

 <p class="video-btn" id="video-btn">
   <p class="video-area" id="video-area"></p>
   <a class="video-shut" id="video-shut">x</a>
 </p>
 <p id="shadow"></p>

Jetons un coup d'œil au CSS

Définissons d'abord la zone vidéo-btn.

.video-btn{
      position: absolute;
      width:600px;
      height: 300px;
      background:black;
      top:50%;
      left: 50%;
      margin-top: -150px;
      margin-left:-300px;
      display: none;
      z-index: 101;
    }
 .video-area{
      float:left;
      width:500px;
      height: 300px;
      background:red;
    }
.video-shut{
      height:100px;
      width:100px;
      font-size:40px;
      color:pink;
      float:left;
      text-align: center;
      /*line-height: 50px;*/
      background: yellow;
      display: block;
      padding-top:30px;
    }

Ensuite, définissez le CSS du calque de masque

 #shadow{
      position: absolute;
      opacity: 0.5;
      filter:alpha(opacity=50);
      bottom:0;
      left: 0;
      right: 0;
      top: 0;
      background:black;
      z-index: 100;
      display: none;
    }

Point clé 1 : Assurez-vous de définir les deux p ici le Positionnement absolu le sort du flux documentaire.

Point 2 : Le calque de masque doit définir les valeurs inférieure, gauche, droite et supérieure à 0 afin que le calque de masque puisse carreler tout l'écran.

Point 3 : Assurez-vous de définir ces deux p pour qu'ils s'affichent : aucun. Laissez l'utilisateur ne pas voir ces deux p au début, sinon ce sera moche de voir ces deux dès leur entrée.

Point 4 : Pour définir la valeur du z-index, la priorité du bouton jaune et du p qui affiche la vidéo doit être supérieure à la priorité du calque de masque. Sinon, vous ne pouvez pas cliquer dessus.

Maintenant, démarrez js : obtenez l'attribution d'identifiant pour les cinq premiers. Répondez ensuite à l'événement lorsque vous cliquez sur le bouton jaune.

Cliquez sur l'événement 1 : Définissez le p où se trouve la vidéo pour afficher : bloquer. Définissez le p où se trouve le calque de masque pour afficher : bloc. En même temps, la vidéo Tudou s'affiche sur l'écran vidéo p. Ce lien est le lien de partage de Tudou.com.

Cliquez sur l'événement 2 : Lorsque vous cliquez sur le bouton x jaune, ces deux p doivent être masqués. Autrement dit, définissez l'affichage de deux p: aucun.