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


Posted in Javascript onSeptember 21, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
javascript引导程序
Oct 26 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
js实现表格字段排序
Feb 19 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 #Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 #Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 #Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 #Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 #Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 #Javascript
jquery+正则实现统一的表单验证
Sep 20 #Javascript
You might like
操作Oracle的php类
2006/10/09 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
python 数据类型强制转换的总结
2021/01/25 Python
Django视图类型总结
2021/02/17 Python
某公司.Net方向面试题
2014/04/24 面试题
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
会计辞职信范文
2014/01/15 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
消防安全管理制度
2014/02/01 职场文书
消防安全承诺书
2014/05/22 职场文书
学习型党组织心得体会
2014/09/12 职场文书
考研英语辞职信
2015/05/13 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server