<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery鼠标悬停上下滑动导航条</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#menu2 li a").wrapInner( '<span class="out"></span>' );
$("#menu2 li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});
$("#menu2 li a").hover(function() {
$(".out", this).stop().animate({'top': '48px'}, 300); // move down - hide
$(".over", this).stop().animate({'top': '0px'}, 300); // move down - show
}, function() {
$(".out", this).stop().animate({'top': '0px'}, 300); // move up - show
$(".over", this).stop().animate({'top': '-48px'}, 300); // move up - hide
});
});
</script>
</head>
<body>
<!-- 代码 开始 -->
<div id="menu2" class="menu">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">预报预警</a></li>
<li><a href="#">气象新闻</a></li>
<li><a href="#">气象服务</a></li>
<li><a href="#">行政审批</a></li>
<li><a href="#">信息公开</a></li>
<li><a href="#">气象科普</a></li>
<li><a href="#">党风廉政</a></li>
<li><a href="#">气象科普</a></li>
</ul>
<div class="cls"></div>
</div>
<!-- 代码 结束 -->
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>
jQuery实现的鼠标悬停上下滑动导航条特效源码.zip
版权申诉
99 浏览量
2022-11-07
00:26:25
上传
评论
收藏 23KB ZIP 举报
毕业_设计
- 粉丝: 1944
- 资源: 1万+
最新资源
- 数据库管理工具:dbeaver-ce-24.0.3-macos-aarch64.dmg
- 和平巨魔跨进成免费.ipa
- 数据库管理工具:dbeaver-ce-24.0.2-stable.x86-64.rpm
- 数据库管理工具:dbeaver-ce-24.0.2-macos-aarch64.dmg
- 数据库管理工具:dbeaver-ce-24.0.1-stable.x86-64.rpm
- 数据库管理工具:dbeaver-ce-24.0.1-macos-aarch64.dmg
- 数据库管理工具:dbeaver-ce-24.0.0-stable.x86-64.rpm
- 数据库管理工具:dbeaver-ce-24.0.0-macos-x86-64.dmg
- 数据库管理工具:dbeaver-ce-24.0.0-macos-aarch64.dmg
- MATRIX KEY 4*4触摸按键模块
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈