滑动导航1(JQuery)

最新推荐文章于 2022-10-23 00:27:33 发布

Tony_Liu0611

最新推荐文章于 2022-10-23 00:27:33 发布

阅读量234

点赞数

分类专栏： web前段(jQuery)

本文链接：https://blog.csdn.net/Tony_Liu0611/article/details/52075713

版权

web前段(jQuery) 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

	<!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>

Tony_Liu0611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滑动导航1(JQuery)

charset="utf-8"/> src="jquery-2.2.3.js"type="text/javascript"charset="utf-8"> type="text/css"> body{ font-family:arial;} ul#navigation { list-style: non
复制链接

扫一扫