jQuery实现响应鼠标滚动的动感菜单效果
更新时间:2015年09月21日 10:46:52 作者:企鹅
这篇文章主要介绍了jQuery实现响应鼠标滚动的动感菜单效果,可实现鼠标滑过菜单项呈现文字上下滑动变换的效果,涉及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程序设计有所帮助。
您可能感兴趣的文章:
- jQuery动画animate方法使用介绍
- jquery animate 动画效果使用说明
- JQuery动画animate的stop方法使用详解
- jQuery动画效果animate和scrollTop结合使用实例
- 分享8款优秀的 jQuery 加载动画和进度条插件
- 基于jquery创建的一个图片、视频缓冲的效果样式插件
- jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
- Jquery网页内滑动缓冲导航的实现代码
- jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
- jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
- jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
- jQuery实现的鼠标响应缓冲动画效果示例
相关文章
JQuery Ajax WebService传递参数的简单实例
下面小编就为大家带来一篇JQuery Ajax WebService传递参数的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-11-11增强用户体验友好性之jquery easyui window 窗口关闭时的提示
在项目中,客户提出这么个要求,就是在关闭弹出的窗口的时候,如果点击 红X 或 取消按钮 则提示 ”确认保存了当前的操作“ 这么个信息,否则就不提示啦2012-06-06利用jQuery+localStorage实现一个简易的计时器示例代码
这篇文章主要给大家介绍了关于利用jQuery+localStorage实现一个简易的计时器的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。2017-12-12
最新评论