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

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

PHP中文网

Libérer： 2017-03-28 09:38:47

original

3063 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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;
    }

Copier après la connexion

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;
    }

Copier après la connexion

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.