Heim > Artikel > Web-Frontend > jquery implementiert die Mausaufforderungsfunktion des Navigationsmenüs

jquery implementiert die Mausaufforderungsfunktion des Navigationsmenüs

php中世界最好的语言Original: 2018-04-25 10:55:281526Durchsuche

Dieses Mal bringe ich Ihnen JQuery zum Implementieren der Maus-Eingabeaufforderungsfunktion des Navigationsmenüs. Was sind die Vorsichtsmaßnahmen für JQuery, um die Maus-Eingabeaufforderungsfunktion des Navigationsmenüs zu implementieren? , lass uns einen Blick darauf werfen.

Dies ist ein wunderbarer Navigationsmenü-Maus-Eingabeaufforderungseffekt, der allgemein als „Link-Eingabeaufforderung“ bekannt ist. Wenn Sie die Maus auf einen Link im Navigationsmenü platzieren, wird der ungefähre Inhalt der Webseite angezeigt, auf die der Link verweist Der Benutzer gelangt zur gewünschten Seite.

Schauen wir uns zunächst den Screenshot des Laufeffekts an:

Der spezifische Code lautet wie folgt:

<!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>链接提示特效</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
 $(".menu a").hover(function() {
  $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
 }, function() {
  $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
 });
});
</script>
<style type="text/css"> 
body {
 margin: 10px auto;
 width: 570px;
 font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
 margin: 100px 0 0;
 padding: 0;
 list-style: none;
}
.menu li {
 padding: 0;
 margin: 0 2px;
 float: left;
 position: relative;
 text-align: center;
}
.menu a {
 padding: 14px 10px;
 display: block;
 color: #000000;
 width: 144px;
 text-decoration: none;
 font-weight: bold;
 background: url(images/button.gif) no-repeat center center;
}
.menu li em {
 background: url(images/hover.png) no-repeat;
 width: 180px;
 height: 45px;
 position: absolute;
 top: -85px;
 left: -15px;
 text-align: center;
 padding: 20px 12px 10px;
 font-style: normal;
 z-index: 2;
 display: none;
}
</style>
</head>
<body>
<ul class="menu">
 <li>
  <a href="http://www.baidu.com">Web Designer Wall</a>  
  <em>A wall of design ideas, web trends, and tutorials</em>
 </li>
 <li>
  <a href="#">Best Web Gallery</a>
  <em>Featuring the best CSS and Flash web sites</em>
 </li>
 <li>
  <a href="#">N.Design Studio</a>
  <em>Blog and design portfolio of WDW designer, Nick La</em>
 </li>
</ul>
</body>
</html>

Ich glaube Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

jQuery implementiert eine Sammlung von Textschaltflächen-Spezialeffekten im Formular

JQuery implementiert eine zufällige Auswahlumschaltung beim Öffnen der Seite

Das obige ist der detaillierte Inhalt vonjquery implementiert die Mausaufforderungsfunktion des Navigationsmenüs. 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：jquery Klicken Sie auf die Miniaturansicht, um den Wiedergabeeffekt zu wechselnNächster Artikel：jquery Klicken Sie auf die Miniaturansicht, um den Wiedergabeeffekt zu wechseln

In Verbindung stehende Artikel

Mehr sehen