您的位置：首页 > Web前端 > JQuery

滑动导航1(JQuery)

2016-07-30 22:50 134 查看

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<script src="jquery-2.2.3.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
	body{ font-family:arial;}
	ul#navigation {
	list-style: none outside none;
	margin: 0;
	padding: 0;
	position: fixed;
	right: 10px;
	top: 0;
	width: 721px;
	z-index: 999999;
	}
	ul#navigation li {
	display: inline;
	float: left;
	width: 103px;
	position: relative;
	top:0px;
	}
	ul#navigation li a {
	background-color: #E7F2F9;
	background-position: 50% 10px;
	background-repeat: no-repeat;
	border: 1px solid #BDDCEF;
	border-radius: 0 0 10px 10px;
	display: block;
	float: left;
	height: 25px;
	margin-top: -2px;
	opacity: 0.7;
	padding-top: 80px;
	text-align: center;
	text-decoration: none;
	line-height:25px;
	width: 100px;
	font-size:11px;
	color: #60ACD8;
	letter-spacing: 2px;
	text-shadow: 0 -1px 1px #FFFFFF;
	}
	ul#navigation li a:hover {
	background-color: #CAE3F2;
	}
	ul#navigation .home a {
	background: url('') no-repeat;
	}
	ul#navigation .about a {
	background: url('') no-repeat;
	}
	ul#navigation .search a {
	background: url('') no-repeat;
	}
	ul#navigation .podcasts a {
	background: url('') no-repeat;
	}
	ul#navigation .rssfeed a {
	background: url('') no-repeat;
	}
	ul#navigation .photos a {
	background: url('') no-repeat;
	}
	ul#navigation .contact a {
	background: url('') no-repeat;
	}
	</style>
	</head>
	<body>
	<ul id="navigation">
	<li class="home"><a href="">第一组</a></li>
	<li class="about"><a href="">第二组</a></li>
	<li class="search"><a href="">第三组</a></li>
	<li class="photos"><a href="">第四组</a></li>
	<li class="rssfeed"><a href="">第五组</a></li>
	<li class="podcasts"><a href="">第六组</a></li>
	<li class="contact"><a href="">第七组</a></li>
	</ul>
	<script type="text/javascript">
	var n=300;
	$(function () {
	$("li").each(function () {
	n+=200;
	$(this).animate({
	top:"-70px"
	},n);
	})
	})
	$("li").hover(function () {
	$(this).stop().animate({
	top:"0px"
	},500)
	},function () {
	$(this).stop().animate({
	top:"-70px"
	},500)
	})
	</script>
	</body>
	</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航