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 相关文章推荐
Jquery 插件开发笔记整理
Jan 17 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
js验证上传图片的方法
May 12 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
ES6基础之默认参数值
Feb 21 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
微信小程序中target和currentTarget的区别小结
Nov 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
php计算十二星座的函数代码
2012/08/21 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
php中的异常和错误浅析
2017/05/03 PHP
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
大学生涯自我鉴定
2014/01/16 职场文书
工程招投标邀请书
2014/01/30 职场文书
民族团结先进个人材料
2014/02/05 职场文书
户外拓展活动方案
2014/02/11 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
《颐和园》教学反思
2014/02/26 职场文书
师德师风演讲稿
2014/05/05 职场文书
食品安全标语
2014/06/07 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android