jQuery实现响应鼠标滚动的动感菜单效果

本文实例讲述了jQuery实现响应鼠标滚动的动感菜单效果。分享给大家供大家参考。具体如下：
这是响应鼠标滚动的一款jQuery动感菜单，横向竖向这个大家怎么改吧，使用了jquery插件，不要忘记载入哦。看效果的时候如果加载有错误，请刷新一下页面就行了。
运行效果截图如下：

在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-mouse-over-dg-menu-style-codes/
具体代码如下：

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

希望本文所述对大家的jQuery程序设计有所帮助。