Beispiel für einen einfachen versteckten js-Effekt-js-Tutorial-php.cn

Beispiel für einen einfachen versteckten js-Effekt

小云云

Freigeben： 2017-12-18 13:11:36

Original

1414 Leute haben es durchsucht

Die Auswirkungen von js auf die Seite, wenn Benutzer die Seite bedienen, sind alle auf Js zurückzuführen. Zu den Vorgängen gehören Klicken, Einziehen, Ausziehen usw. Dieser Artikel wird Ihnen ein Beispiel für die anfängliche Erkundung von js und einfachen Versteckeffekten geben. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Beispiel 1: Box durch Anzeige ausblenden

<!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>

Nach dem Login kopieren

Bei der Übergabe des Variablennamens var können Sie weiterhin implementieren:

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

Nach dem Login kopieren

Sie können auch transparent übergeben Deckkraft und Höhe steuern.

Erstellen Sie den Baidu-Anmeldeeffekt, klicken Sie auf „Anmelden“, das Anmeldefenster wird angezeigt und beendet

<!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>

Nach dem Login kopieren

(Auch wenn es einfach ist, tun Sie es nicht) Seien Sie nicht unvorsichtig, das Obige ist eine Diaplay-Methode zur Steuerung des Box-Anzeigestatus.

Verwandte Empfehlungen:

js verbirgt Inhalte zwischen Divs nach Klassennamen

Verwenden Sie CSS, um Divs in HTML-Methoden auszublenden

Beispiele zur Verwendung von HTML-Elementen zum Ein-/Ausblenden, Erstellen/Löschen von Javascript

Das obige ist der detaillierte Inhalt vonBeispiel für einen einfachen versteckten js-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!