今天做了一个动态菜单条，先上图片，简单说一下我想实现的效果：

就是以下这个地方，随着鼠标指到哪，它就划到哪，并有一个惯性的幅度，并且滑动距离越远，停住的时候惯性越大，摆动幅度越大，这就是我大概想实现的效果。

这样我再上一下代码：

html部分：

<center>

		<div id="menu">

			<ul id="book" onmouseover="choose(event)">

			<li class="selected"><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 id="bar"></li>//这个地方的实现是跟我自己想的有些出入的，可是发现还是这个好

			</ul>

		</div>

	</center>

CSS部分：

* { margin:0; padding:0; }

body { width:100%; height:100%; overflow:auto; }

ul{width:800px;position:relative;margin-top:100px;background:grey;height:30px;}

li{width:70px;height:30px;line-height:30px;border-radius:10px;float:left;margin-left:20px;background:#fff0f0;position:relative;z-index:2;list-style:none;}

a{text-decoration:none;}

.selected{font-weight:bold;background:#ccc;}

#bar{padding-bottom:0px;width:70px;height:5px;z-index:4;position:absolute;background:red;bottom:-10px;}//这个地方bottom为负的

js部分：

var ulpart=null;//ul部分

var eachli=null;//li部分

var slide=null;//滑动部分

var speed=0;//移动速度

var fudu=7;//最后停下来时的惯性幅度

var move=null;//移动

var begin = 0;//開始的li部分

var stage = 0;//移动滑过li的个数

var now = 0;//当前的li部分

window.onload=function(){

	ulpart=document.getElementById("book");	//获取ul对象

	eachli=ulpart.getElementsByTagName("li");//获取li对象

	slide=document.getElementById("bar");//获取滑动模块对象

	for(var i=0;i<eachli.length;i++){

		if(eachli[i]!=slide){

			eachli[i].onmouseover=change;

		}

	}

}

function change(){

	for(var i=0;i<eachli.length;i+=1){

		if(eachli[i]===this){//这个地方的this实在是妙啊，好用

			var target=(eachli[i].offsetWidth+20)*i;//当前li的左边距第一个li的左边的距离，20为li之间距离

			now=i;//当前li

			stage = parseInt(now - begin);//要移动的方向，正的是向右，负的是向左

			if(move){

				clearInterval(move);

			}

			if(stage>0){

				move=setInterval("go("+target+")",30);//右移

			}else{

				move=setInterval("back("+target+")",30);//左移

			}

			begin=now;//将当前位置该为初始位置

		}

		eachli[i].className="";

		this.className="selected";

	}

}

function go(target){

	var left=slide.offsetLeft;

	speed+=fudu;

	left+=speed;//移动速度加快的同一时候，距离变远

	if(left>=target){//一旦超出距离

		speed*=-1;//惯性抖动效果，这个效果也时管时无论，问题在哪呢？

		if(Math.abs(speed)<=fudu){

			clearInterval(move);

			move=null;

		}

		left=target;

	}

	slide.style.left=left+"px";

}

function back(target){

	if(slide.offsetLeft===target){

		clearInterval(move);

		move=null;

	}else{

		speed=(target-slide.offsetLeft)/5;

		slide.style.left=slide.offsetLeft+speed+"px";

	}

}

惯性的抖动效果，在前面做掉落抖动的效果的时候以前碰到过，可是这次效果时管时无论，问题到底在哪呢，实在有些困了，先睡，有大神路过的话请指教啊。

多希望能够有那么一个地方，明媚却不忧伤