Exemple d'effet caché simple js-js tutoriel-php.cn

Exemple d'effet caché simple js

小云云

Libérer： 2017-12-18 13:11:36

original

1379 Les gens l'ont consulté

Les effets de js sur la page lorsque les utilisateurs utilisent la page sont tous dus à Js. Les opérations incluent le clic, l'entrée, la sortie, etc. Cet article partagera avec vous un exemple d'exploration initiale de js et d'effets cachés simples. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Exemple 1 : Masquer la boîte via display

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title></title>
  <style>
   *{
   margin:0px;
   padding:0px;
   }
   .li{
   list-style:none;
   }
   #p1{
   width:200px;
   text-align:center;
   font:30px/60px "simhei";
   }
   #p2{
   width:200px;
   border:1px solid black;
   }
   ul{
   margin-top:10px;
   border:1px solid black;
   display:none;
   }
   li{
   height:60px;
   }
   li:hover{
   background-color:blue;
   color:white;
   }
  </style>
 </head>
 <html>
  <p id ="p1">
   <p id="p2">设置</p>
    <ul id="oul">
     <li>搜索设置</li>
     <li>高级设置</li>
     <li>关闭预测</li>
     <li>搜索历史</li>
    </ul>  
  </p>
 </html>
 <script>
  document.getElementById('p1').onmouseover=function(){
   document.getElementById('oul').style.display='block';
  }
  document.getElementById('p1').onmouseout=function(){
   document.getElementById('oul').style.display='none';
  }
 </script>
</html>

Copier après la connexion

Lors du passage du nom de la variable var, cela peut être continué :

var op1=document.getElementById('p1');
    var oul=document.getElementById('oul');
    op1.onmouseover=function(){
      oul.style.display='block';
    }
    op1.onmouseout=function(){
      oul.style.display='none';
    }

Copier après la connexion

Cela peut également être fait via l'opacité transparente et la hauteur. Contrôlez le masquage et l'affichage.

Créez un effet de connexion Baidu, cliquez sur Connexion, la fenêtre de connexion apparaîtra et quittez

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
      body{
      border:1px solid white
      }
      #login{
      width:300px;
      height:300px;
      background-color:yellow;
      margin:0px auto;
      margin-top:200px;
      display:none;
      }
      .classclose{
      width:40px;
      height:20px;
      font:16px/20px "simhei";
      text-align:center;
      background-color:red;
      cursor:pointer;
      float:right;
      }
    </style>
  </head>
  <body>
    <p id="box" class="classclose">登录</p>
    <p id ="login">
      <p id="close" class="classclose">退出</p>
    </p>
  </body>
  </html>
  <script>
    var obox=document.getElementById('box');
    var ologin=document.getElementById('login');
    var oclose=document.getElementById('close');
    obox.onclick=function(){
      ologin.style.display='block';
    }
    oclose.onclick=function(){
      ologin.style.display='none';
    }
  </script>
</html>

Copier après la connexion

(Même si c'est simple, ne Ne soyez pas négligent, ce qui précède est la méthode d'affichage pour contrôler l'état d'affichage de la boîte).

Recommandations associées :

js masque le contenu entre les divs par nom de classe

Utilisez CSS pour masquer les divs dans les méthodes HTML

javascript afficher/masquer, créer/supprimer des exemples d'utilisation d'éléments HTML explication détaillée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!