一款jquery编写的滑动菜单效果
这是一款jquery编写的滑动菜单效果，当点击导航文字时，圆形按钮滑动到当前位置。圆形按钮能根据导航文字的多少自动伸缩。
文件夹中有两个文件，一个是slider_click.html，意思是点击某个选项时滚动。还有一个是slider_hover.html，意思是鼠标移动到某个选项时滚动。有人会问‘不是把click改成hover’不就行了么，但改成hover后会出现一个问题：鼠标不停离开上一个li，进入下一个li，滚动就不停执行。如果从‘日志’移动到‘互动空间’，移动就会停顿两次。为了解决这个问题，slider_hover.html里又增加了一段代码，控制鼠标停止运动时才执行。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>目标滑动到当前位置</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script>
$(function(){
$cur=$('.menu').find('.cur');
$li=$('.menu').find('li');
var lastLen=0;//记录前次的距离
var step=0;//圆角形状惯性奔出的距离
$li.click(function(){
var $index=$(this).index();
var length=0;
var m=0;
$(this).find('a').blur();
$('#content').empty().append($(this).find('a').html());//将文本加入撑宽容器
for(var i=0;i<$index;i++)//累加宽度和边距值为运动距离
{
length+=$li.eq(i).width()+40;
}
length+=28;//加入初始边距
if(length>lastLen){//如果向右运动，step为正
step=30;
}
else{
step=-30;
}
lastLen=length;//保存此次的距离
$cur.animate({left:length+step},200,function(){ $cur.animate({left:length},200) });
})
})
</script>
<style type="text/css">
ul,li,ol{ margin:0px;padding:0px;list-style:none}
.nav li{ width:12px;height:48px;overflow:hidden;float:left;background:url(images/nav_bg.gif) }
.nav li.nav_l{ background-position:0px 0px }
.nav li.nav_m{ width:670px;background-position:0px -98px }
.nav li.nav_r{ background-position:0px -49px }
.nav .menu{ position:relative;height:20px;}
.nav .menu a{ height:20px;line-height:200px;display:block;float:left;overflow:hidden;position:relative;z-index:200; background:url(images/nav_menu.png) no-repeat; }
.nav ol { float:left;margin-top:13px; }
.nav ol li{ background:none;text-align:center;margin-left:40px }
.nav ol li.size2 a,.nav ol li.size2{ width:44px }
.nav ol li.size4 a,.nav ol li.size4{ width:80px }
.nav .menu a.item0{ background-position:5px 0px }
.nav .menu a.item1{ background-position:-79px 0px }
.nav .menu a.item2{ background-position:-150px 0px }
.nav .menu a.item3{ background-position:-223px 0px }
.nav .menu a.item4{ background-position:-294px 0px }
.nav .menu .cur{ height:32px; position:absolute;left:28px;top:9px; z-index:100; }
.nav .menu .cur div{ height:32px;float:left;background:url(images/nav_menu_cur.png) }
.nav .menu .cur .cur_l{ width:15px;background-position:0px 0px }
.nav .menu .cur .cur_m{ height:32px;overflow:hidden;padding:0px 3px;line-height:200px;background-position:0px -30px }
.nav .menu .cur .cur_r{ width:15px;background-position:0px -62px }
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="nav_l"></li>
<li class="nav_m">
<div class="menu">
<div class="cur">
<div class="cur_l"></div>
<div id="content" class="cur_m">首页</div>
<div class="cur_r"></div>
</div>
<ol>
<li class="size2"><a class="item0" href="javascript:void(0)">首页</a></li>
<li class="size2"><a class="item1" href="javascript:void(0)">日志</a></li>
<li class="size2"><a class="item2" href="javascript:void(0)">相册</a></li>
<li class="size2"><a class="item3" href="javascript:void(0)">微博</a></li>
<li class="size4"><a class="item4" href="javascript:void(0)">互动空间</a></li>
<li class="size2"><a class="item2" href="javascript:void(0)">留言</a></li>
<li class="size2"><a class="item3" href="javascript:void(0)">私信</a></li>
</ol>
</div>
</li>
<li class="nav_r"></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>目标滑动到当前位置</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script>
var e;//当前li元素的索引值
var lastLen=0;//记录前次的距离
var step=0;//圆角形状惯性奔出的距离
var posi;//计时运动
function slide(){
var $index=e;
var length=0;
var m=0;
$li.eq(e).find('a').blur();
for(var i=0;i<$index;i++)//累加宽度和边距值为运动距离
{
length+=$li.eq(i).width()+40;
}
length+=28;//加入初始边距
if(length>lastLen){//如果向右运动，step为正
step=30;
}
else{
step=-30;
}
lastLen=length;//保存此次的距离
clearInterval(posi) ;
$cur.animate({left:length+step},200,function(){ $cur.animate({left:length},100) });
$('#content').empty().append($li.eq(e).find('a').html());//将文本加入撑宽容器
}
$(function(){
$cur=$('.menu').find('.cur');
$li=$('.menu').find('li');
$li.mousemove(function(){ //当鼠标移动时，不执行posi，当鼠标静止100毫秒时posi执行。
//添加这段的目的是防止鼠标在导航上移动时，因为不停离开上一个li，进入下一个li而不停执行posi，造成运动断断续续。
clearInterval(posi);
e=$(this).index();//记录当前元素的索引值
posi=setInterval('slide()',100);
}).mouseout(function(){ clearInterval(posi)})
})
</script>
<style type="text/css">
ul,li,ol{ margin:0px;padding:0px;list-style:none}
.nav li{ width:12px;height:48px;overflow:hidden;float:left;background:url(images/nav_bg.gif) }
.nav li.nav_l{ background-position:0px 0px }
.nav li.nav_m{ width:670px;background-position:0px -98px }
.nav li.nav_r{ background-position:0px -49px }
.nav .menu{ position:relative;height:20px;}
.nav .menu a{ height:20px;line-height:200px;display:block;float:left;overflow:hidden;position:relative;z-index:200; background:url(images/nav_menu.png) no-repeat; }
.nav ol { float:left;margin-top:13px; }
.nav ol li{ background:none;text-align:center;margin-left:40px }
.nav ol li.size2 a,.nav ol li.size2{ width:44px }
.nav ol li.size4 a,.nav ol li.size4{ width:80px }
.nav .menu a.item0{ background-position:5px 0px }
.nav .menu a.item1{ background-position:-79px 0px }
.nav .menu a.item2{ background-position:-150px 0px }
.nav .menu a.item3{ background-position:-223px 0px }
.nav .menu a.item4{ background-position:-294px 0px }
.nav .menu .cur{ height:32px; position:absolute;left:28px;top:9px; z-index:100; }
.nav .menu .cur div{ height:32px;float:left;background:url(images/nav_menu_cur.png) }
.nav .menu .cur .cur_l{ width:15px;background-position:0px 0px }
.nav .menu .cur .cur_m{ height:32px;overflow:hidden;padding:0px 3px;line-height:200px;background-position:0px -30px }
.nav .menu .cur .cur_r{ width:15px;background-position:0px -62px }
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="nav_l"></li>
<li class="nav_m">
<div class="menu">
<div class="cur">
<div class="cur_l"></div>
<div id="content" class="cur_m">首页</div>
<div class="cur_r"></div>
</div>
<ol>
<li class="size2"><a class="item0" href="javascript:void(0)">首页</a></li>
<li class="size2"><a class="item1" href="javascript:void(0)">日志</a></li>
<li class="size2"><a class="item2" href="javascript:void(0)">相册</a></li>
<li class="size2"><a class="item3" href="javascript:void(0)">微博</a></li>
<li class="size4"><a class="item4" href="javascript:void(0)">互动空间</a></li>
<li class="size2"><a class="item2" href="javascript:void(0)">留言</a></li>
<li class="size2"><a class="item3" href="javascript:void(0)">私信</a></li>
</ol>
</div>
</li>
<li class="nav_r"></li>
</ul>
</div>
</body>
</html>