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 prop的使用介绍及与attr的区别
Dec 19 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
javascript常用代码段搜集
Dec 04 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
js逆向解密之网络爬虫
May 30 Javascript
关于vue中如何监听数组变化
Apr 28 Vue.js
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调用Google translate_tts api实现代码
2013/08/07 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
php实现文章评论系统
2019/02/18 PHP
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
python人民币小写转大写辅助工具
2018/06/20 Python
python实现大文件分割与合并
2019/07/22 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
文员转正自我鉴定怎么写
2014/09/29 职场文书
群众路线个人整改措施
2014/10/24 职场文书
小学生作文批改评语
2014/12/25 职场文书
简历自我评价模板
2015/03/11 职场文书
叶问观后感
2015/06/15 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python