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语句中的CDATA标签的意义
May 09 Javascript
JavaScript的面向对象方法以及差别
Mar 31 Javascript
js 加载时自动调整图片大小
May 28 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
js实现计时器秒表功能
Dec 16 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 Javascript
原生js实现滑块区间组件
Jan 20 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
安装APACHE
2007/01/15 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
浅谈js中的this问题
2017/08/31 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python如何快速实现分布式任务
2017/07/06 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
python对视频画框标记后保存的方法
2018/12/07 Python
python同时遍历两个list用法说明
2020/05/02 Python
Python读写Excel表格的方法
2021/03/02 Python
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
教育实习生的自我评价分享
2013/11/21 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
医学求职自荐信
2014/06/21 职场文书
房屋出售授权委托书
2014/10/12 职场文书
预备党员考察意见范文
2015/06/01 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书