JQ菜单滑块

网站导航滑块效果：
复制以下代码保存到html文件中即可查看效果...
<html>

<head>

    <title>JQ菜单滑块</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<style type="text/css">

		.nav{

			width:605px;

			height:50px;

			background-color:#999;

			position:relative;

		}

		.nav>ul{

			width:100%;

			height:100%;

			background-color:#177cb0;

			list-style:none;

			float:left;

			margin: 0;

			padding: 0;

		}

		.nav>ul>li{

			width:100px;

			height:50px;

			line-height:50px;

			float:left;

			background-color:#666;

			text-align:center;

			margin-left:1px;

                        color:#fff;

	        }

		.nav>ul>li:first-child{

			margin-left:0;

		}

		.fmove{

			width:100px;

			height:5px;

			position:absolute;

			z-index:10;

			left:0;

			bottom:0;

			background-color:blue;

		}

	</style>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

</head>

<body>

    <div class="nav">

		<ul>

			<li>首页</li>

			<li>菜单1</li>

			<li>菜单2</li>

			<li>菜单3</li>

			<li>菜单4</li>

			<li>菜单5</li>

		</ul>

		<div class="fmove"></div>

	</div>

</body>

</html>

<script type="text/javascript">

    $(function () {

		var tt;

		$(".nav>ul>li").hover(function(){

			clearTimeout(tt);

			var lft = $(this).position().left;

			tt = setTimeout('$(".fmove").animate({left:' + lft + '})',450);

		});

        $(".nav").mouseleave(function(){

			clearTimeout(tt);

			tt = setTimeout('$(".fmove").animate({left:0})',650);

		});

    });

</script>
巴特西

JQ菜单滑块

最新文章

热门文章
