jQuery implementiert dynamische Menüeffekte, die auf das Scrollen mit der Maus reagieren

jQuery implementiert dynamische Menüeffekte, die auf das Scrollen mit der Maus reagieren_jquery

WBOY

Freigeben： 2016-05-16 15:38:32

Original

1220 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie jQuery einen dynamischen Menüeffekt implementiert, der auf das Scrollen mit der Maus reagiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein dynamisches jQuery-Menü, das auf das Scrollen mit der Maus reagiert. Vergessen Sie nicht, es zu laden. Wenn beim Anzeigen des Effekts ein Fehler beim Laden auftritt, aktualisieren Sie bitte die Seite.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-mouse-over-dg-menu-style-codes/

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>
<title>响应鼠标滚动的jQuery动感菜单</title>
<style>
ul#topnav {
  margin: 15px 0 50px 0;
  padding: 0;
  list-style: none;
  float: left;
  font-size: 1.1em;
}
ul#topnav li {
  margin: 0;
  padding: 0;
  overflow: hidden;
  float: left;
  height: 40px;
}
ul#topnav li.home {
  width: 75px;
}
ul#topnav li.Rss {
  width: 75px;
}
ul#topnav li.Portfolio {
  width: 105px;
}
ul#topnav li.Blog {
  width: 75px;
}
ul#topnav li.About {
  width: 80px;
}
ul#topnav li.Contact {
  width: 95px;
}
ul#topnav a, ul#topnav span {
  padding: 10px 20px;
  float: left;
  text-decoration: none;
  color: #fff;
  background: url(images/a_bg.gif) repeat-x;
  text-transform: uppercase;
  clear: both;
  width: 100%;
  height: 20px;
  line-height: 20px;
}
ul#topnav a{
  color: #555;
  background-position: left bottom;
}
ul#topnav span { 
  background-position: left top;
}
ul#topnav.v2 span {
  background: transparent url(images/a_bg.gif) repeat-x left top;
}
ul#topnav.v2 a {
  background: transparent url(images/a_bg.gif) repeat-x left bottom;
  color: #555;
}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
</head>
<script>
$(document).ready(function() {
$("#topnav li").prepend("<span></span>");
$("#topnav li").each(function() {
var linkText = $(this).find("a").html();
$(this).find("span").show().html(linkText);}); 
$("#topnav li").hover(function() {
$(this).find("span").stop().animate({
marginTop: "-40"
}, 250);
} , function() {
$(this).find("span").stop().animate({
marginTop: "0"
}, 250);
});
});
</script>
<body>
<ul id="topnav">
 <li><a href="#">Home</a></li>
 <li><a href="#">Portfolio</a></li>
 <li><a href="#">Blog</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
 <li><a href="#">Rss</a></li>
</ul>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.