Heim > Artikel > Web-Frontend > Beispiel für einen einfachen versteckten js-Effekt
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!