【jquery练习】横向滚动导航菜单
<!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>横向滚动导航菜单</title>
<style type="text/css">
body,div,address,blockquote,iframe,ul,ol,dl,dt,dd,li,h1,h2,h3,h4,h5,h6,p,pre,table,caption,th,td,form,legend,fieldset,input,button,select,textarea{margin:0;padding:0;font-weight:normal;font-family:inherit}
ol,ul,li{list-style:none;}
img{margin:0;padding:0;border:none}
table{border-collapse:collapse;}
.cls{clear:both;}
.notxt{text-indent:-9999px;}
body{font-size:14px;font-family:Tahoma;font-family:Arial, Hel,Microsoft YaHei;}
a{color:#000;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}
a:hover{color:#FF0000;}
i { font-style:normal;}
.nav {width:980px;margin:0 auto; position:relative;}
.nav ul li {float:left;padding:0 20px;text-align:center;height:40px;line-height:40px;}
.curBg { background:#F00;height:3px;position:absolute;bottom:0;width:68px;left:0px;}
</style>
</head>
<body>
<!-- 代码开始 -->
<div class="nav">
<ul>
<li class="cur"><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="curBg"></div>
<div class="cls"></div>
</div>
<!-- 代码结束 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $liCur = $(".nav ul li.cur"),
curP = $liCur.position().left,
curW = $liCur.outerWidth(),
$slider = $(".curBg"),
$navBox = $(".nav");
$targetEle = $(".nav ul li a"),
$slider.animate({
"left":curP,
"width":curW
});
$targetEle.mouseenter(function () {
var $_parent = $(this).parent(),
_width = $_parent.outerWidth(),
posL = $_parent.position().left;
$slider.stop(true, true).animate({
"left":posL,
"width":_width
}, "fast");
});
$navBox.mouseleave(function (cur, wid) {
cur = curP;
wid = curW;
$slider.stop(true, true).animate({
"left":cur,
"width":wid
}, "fast");
});
})
</script>
</body>
</html>
