search

Home >Web Front-end >JS Tutorial >jQuery implements dynamic menu effects that respond to mouse scrolling_jquery

jQuery implements dynamic menu effects that respond to mouse scrolling_jquery

WBOY
WBOYOriginal
2016-05-16 15:38:321239browse

The example in this article describes how jQuery implements a dynamic menu effect that responds to mouse scrolling. Share it with everyone for your reference. The details are as follows:

This is a jQuery dynamic menu that responds to mouse scrolling. How do you change it horizontally and vertically? It uses the jquery plug-in. Don’t forget to load it. If there is an error in loading when viewing the effect, please refresh the page.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows: 

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

I hope this article will be helpful to everyone’s jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JS CSS implements simple sliding door (sliding menu) effect_javascript skillsNext article：JS CSS implements simple sliding door (sliding menu) effect_javascript skills

Related articles

See more