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 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
Javascript 构造函数详解
Oct 22 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
jquery实现倒计时功能
Dec 28 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 Javascript
Vue实现todo应用的示例
Feb 20 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在字符断点处截断文字的实现代码
2011/04/21 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
PHP图片水印类的封装
2017/07/06 PHP
php支付宝APP支付功能
2020/07/29 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
用javascript实现自定义标签
2007/05/08 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
python从入门到精通(DAY 1)
2015/12/20 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
python实现决策树分类算法
2017/12/21 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
基于matplotlib xticks用法详解
2020/04/16 Python
python cookie反爬处理的实现
2020/11/01 Python
Linux面试题LINUX系统类
2015/11/25 面试题
火锅店创业计划书范文
2014/02/02 职场文书
会议室标语
2014/06/21 职场文书
给老婆道歉的话
2015/01/20 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers