本文实例讲述了jQuery实现响应鼠标滚动的动感菜单效果。分享给大家供大家参考。具体如下：

这是响应鼠标滚动的一款jQuery动感菜单，横向竖向这个大家怎么改吧，使用了jquery插件，不要忘记载入哦。看效果的时候如果加载有错误，请刷新一下页面就行了。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-鼠标悬停-DG-菜单-样式-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题响应鼠标滚动的jQuery动感菜单/title style ul # top nav { margin : 15px 0 50px 0；padd : 0；列表样式：无；向左浮动：font-size : 1.1 em} ul # topnav Li { margin : 0；padd : 0；飞越：隐藏；向左浮动：高度： 40px} ul #顶级李导航。home { width : 75px}ul#topnav li .Rss { width: 75px}ul#topnav li .投资组合{ width: 105px}ul#topnav li .博客{ width: 75px}ul#topnav li .大约{ width: 80px}ul#topnav li .触点{ width: 95px}ul#topnav a，ul # top nav span { padd : 10px 20px；向左浮动：文本装饰：无；color: # fff背景： URL(图片/a _ BG。gif)重复-x；文本转换：大写；clear:两者；宽度： 100%;高度： 20像素线高： 20px} ul # topnav a { color: # 555背景-位置：左下方；} ul #顶部导航跨度{背景-位置：左上角；} ul # topnav。v2 span {背景：透明url(图像/a_bg.gif)重复-x左上角；}ul#topnav.v2 a { background:透明url(图像/a_bg.gif)重复-x左下方；color: # 555}/style脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/脚本/头脚本$(文档)。ready(function() {$('#topnav li ')).前置(“跨度/跨度”)；$('#topnav li ').每个（函数(){var linkText=$(this)).查找(' a ').html()；$(这个)。查找(' span ').显示()。html(链接文本);});$('#topnav li ').悬停(function() {$(this)).查找(' span ').停止()。动画({marginTop: '-40'}，250)；}，function() {$(this).查找(' span ').停止()。动画({marginTop: '0'}，250)；});});/script body ul id=' topnav ' lia href=' # ' Home/a/Li lia href=' # ' Portfolio/a/Li lia href=' # ' Blog/a/Li lia href=' # ' About/a/Li lia href=' # ' Contact/a/Li lia href=' # ' Rss/a/Li/ul/body/html希望本文所述对大家的jQuery程序设计有所帮助。