Web-Frontend
js-Tutorial
CSS JS-Methode zum Implementieren des Klickens auf Text, um das DIV-Ebenenmenü in regelmäßigen Abständen aufzurufen und automatisch zu schließen. Javascript-Kenntnisse
CSS JS-Methode zum Implementieren des Klickens auf Text, um das DIV-Ebenenmenü in regelmäßigen Abständen aufzurufen und automatisch zu schließen. Javascript-Kenntnisse
Das Beispiel in diesem Artikel beschreibt die Methode, mit CSS JS das DIV-Ebenenmenü automatisch zu schließen, wenn auf den Text geklickt wird. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:
Hier verwenden wir CSS JS, um die Erweiterung eines DIV-Ebenenmenüs nach dem Klicken auf den Text zu animieren, und es wird automatisch geschlossen, wenn es abläuft. Dies ist der Effekt, der durch die Kombination von CSS mit JS erzielt wird.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS+JS弹出DIV层</title>
<script type="text/javascript">
var w = 0;
var h = 0;
var mout;
function emotion(){
var oMenu = document.getElementById("menu");
if(w <= 50){
oMenu.style.display = "block";
fnLarge();
}
else{
fnSmall();
}
}
function fnLarge(){
var oMenu = document.getElementById("menu");
if(w < 200){
w += 50;
h += 25;
oMenu.style.width = w+"px";
oMenu.style.height = h+"px";
window.setTimeout("fnLarge()",10);
}
}
function fnSmall(){
var oMenu = document.getElementById("menu");
if(w > 0){
w -= 50;
h -= 25;
oMenu.style.width = w+"px";
oMenu.style.height = h+"px";
window.setTimeout("fnSmall()",5);
}
else{
oMenu.style.display = "none";
}
}
</script>
<style type="text/css">
body{
text-align: center;
}
p{
cursor: pointer;
margin: 0;
padding: 0;
font-size: 24px;
display: inline;
}
div a:link, div a:visited{
color: #666;
text-decoration: none;
}
div a:hover{
color: #FF6600;
text-decoration: underline;
}
div{
border: 2px solid #666;
background: #fff;
margin: 5px auto;
overflow: hidden;
display: none;
padding: 5px 10px;
}
ul,li{
margin: 0;
padding: 0;
}
li{
list-style: none;
width:70px;
}
li.title{
font-weight: bold;
}
</style>
</head>
<body>
<p onclick="emotion();">点击这行文字试试!</p>
<div id="menu"
onmouseout="javascript:mout=setTimeout('fnSmall()',2111);"
onMouseOver="javascript:clearTimeout(mout);">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="80" valign="top" align="left">
<ul>
<li class="title">ASP</li>
<li><a href="#" onclick="fnSmall();">新闻</a></li>
<li><a href="#" onclick="fnSmall();">论坛</a></li>
<li><a href="#" onclick="fnSmall();">CMS</a></li>
<li></li>
</ul></td>
<td width="80" valign="top" align="left">
<ul>
<li class="title">PHP</li>
<li><a href="#" onclick="fnSmall();">文章</a></li>
<li><a href="#" onclick="fnSmall();">聊天</a></li>
<li><a href="#" onclick="fnSmall();">插件</a></li>
<li><a href="#" onclick="fnSmall();">企业</a></li>
</ul>
</td>
<td width="80" valign="top" align="left">
<ul>
<li class="title">JSP</li>
<li><a href="#" onclick="fnSmall();">AJAX</a></li>
<li><a href="#" onclick="fnSmall();">JQUERY</a></li>
<li><a href="#" onclick="fnSmall();">MYSQL</a></li>
<li><a href="#" onclick="fnSmall();">JAVA</a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Wie kann ich index.css -Datei mit Element UI ordnungsgemäß einführen und Stilladungsfehler vermeiden?
Apr 05, 2025 pm 02:33 PM
Best Practices über die Einführung von Elementui -Stildateien Viele Entwickler verwenden Element ...
Wie erhöht man die Höhe des Eingangselements und erzeugt den Text unten?
Apr 05, 2025 pm 02:51 PM
Wie erhöht man die Höhe des Eingangselements und erzeugt den Text unten? Wenn wir die Höhe des Eingabeelements im Webdesign anpassen müssen und hoffen, dass der Text darin ...
Wie löste ich das Problem des Seitenscrollens, nachdem die Softtastatur des Browsers Mobile Edge aufgetaucht ist?
Apr 05, 2025 pm 02:57 PM
In Bezug auf die Edge -Browser -Eingangsmethode, die Seitenhöhe und das Scrollen nach dem Auftauchen der Tastatur. Wenn Sie den Edge -Browser auf Ihrem Mobiltelefon verwenden, stößt die Seite häufig auf dieses Problem: � ...
Wie zeichne ich eine bestimmte Form mit einer orangefarbenen Hintergrundfarbe mit CSS 'Clip-Pfad-Eigenschaft?
Apr 05, 2025 pm 04:36 PM
Praktische Anwendungsfälle von CSS -Zeichnungsfunktion im modernen Webdesign können CSS nicht nur für Layout und Stil, sondern auch für das Erstellen komplexer Grafiken und Animationen verwendet werden. Mai...
Wie füge ich das Laden von Animationen zum A -Tag hinzu und springe dann?
Apr 05, 2025 pm 04:48 PM
Implementieren Sie die kurze Animation geschickt und springen Sie nach dem Klicken auf das A -Tag. Wir hoffen oft, dass die Seite nach dem Klicken auf das A -Tag zuerst ein kurzes Ladeereignis anzeigen kann ...
Was ist die & lt; Figur & gt; Element in CSS für?
Apr 05, 2025 pm 04:51 PM
Wofür sind die Elemente in CSS? Während des Lernens und der Verwendung von CSS können Sie auf weniger häufige HTML -Elemente wie & lt ...
Wie verwende ich lokal installierte 'Jingnanmai -Round' auf einer Webseite, ohne die Schriftart zu laden?
Apr 05, 2025 pm 04:54 PM
So verwenden Sie lokal installierte Schriftdateien auf Webseiten in der Webentwicklung, manchmal werden wir auf die Situation stoßen, in der wir bestimmte Schriftarten verwenden müssen, die auf unserem Computer installiert sind ...
Wie kann man den Schwebeffekt von zusammengeführten Zeilen in El-Table von Element UI anpassen?
Apr 05, 2025 pm 03:24 PM
So passen Sie den EL-Table Merge-Hover-Effekt an, wenn Sie Element verwenden ...
