suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispiel für einen einfachen versteckten js-Effekt

Beispiel für einen einfachen versteckten js-Effekt

小云云
小云云Original
2017-12-18 13:11:361386Durchsuche

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>

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

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>

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

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：Über Vue-Code-Splitting und Lazy LoadingNächster Artikel：Über Vue-Code-Splitting und Lazy Loading

In Verbindung stehende Artikel

Mehr sehen