<!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=gb2312" />
<title>两款jQuery仿flash导航菜单 - 网页模板</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function() {
/* 1st example */
/// wrap inner content of each anchor with first layer and append background layer
$("#menu1 li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
// loop each anchor and add copy of text content
$("#menu1 li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});
$("#menu1 li a").hover(function() {
// this function is fired when the mouse is moved over
$(".out", this).stop().animate({'top': '40px'}, 250); // move down - hide
$(".over", this).stop().animate({'top': '0px'}, 250); // move down - show
$(".bg", this).stop().animate({'top': '0px'}, 120); // move down - show
}, function() {
// this function is fired when the mouse is moved off
$(".out", this).stop().animate({'top': '0px'}, 250); // move up - show
$(".over", this).stop().animate({'top': '-40px'}, 250); // move up - hide
$(".bg", this).stop().animate({'top': '-40px'}, 120); // move up - hide
});
/* 2nd example */
$("#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': '40px'}, 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': '-40px'}, 300); // move up - hide
});
});
</script>
</head>
<body>
<!-- 代码 开始 --><br />
<div id="menu1" 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>
</ul>
<div class="cls"></div>
</div>
<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>
</ul>
<div class="cls"></div>
</div>
<!-- 代码 结束 -->
<div style="text-align:center">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源:<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
两款jQuery仿flash导航菜单.zip
版权申诉
136 浏览量
2022-11-26
11:03:14
上传
评论
收藏 49KB ZIP 举报
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+