特效演示地址：http://itxiaoming.sinaapp.com/demo03/demo.html
?
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>demo</title> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="demo.js"></script> </head> <body> <div id="main"> <div id="menu"> <div id="slider"></div> <ul id="menu_ul"> <li>首页</li> <li>新闻中心</li> <li>业务</li> <li>案例</li> <li>关于我们</li> </ul> </div> </div> </body> </html>
?
$(document).ready(function(){
var width = $("#menu_ul li:first").outerWidth(true);
$("#slider").width(width);
$("#menu_ul li").mouseover(function(){
var div = $("#slider");
//获取当前栏目块的宽度
var _width = $(this).outerWidth(true);
//计算当前栏目块所在的位置
var _left = 0;
for( var i = 0 ; i < $(this).index() ; i++ ){
_left += $("#menu_ul li:eq("+i+")").outerWidth(true);
}
var _divLeft = div.css("left");
var n1 = 20;
var n2 = -30;
var n3 = 10;
/**
* 如果计算出来的位置大于当前滑块的位置，则是加法，否则是减法
* 加法就是向右弹，减法就是向左弹
*/
if( parseInt(_divLeft) > parseInt(_left) ){
n1 = parseInt(0 - n1);
n2 = parseInt(0 - n2);
n3 = parseInt(0 - n3);
}
//移动滑块到当前栏目块下并修改滑块的宽度为当前栏目块的宽度，然后开启一个反弹的动画效果
_left += n1;
div.stop(true,false).animate({left:_left,width:_width},500);
_left += n2;
div.animate({left:_left},500);
_left += n3;
div.animate({left:_left},500);
});
// $(".menu_li").mouseout(function(){
// var div = $(this);
// div.toggleClass(‘menu_li_b‘);
// });
});
?
初始化的时候先初始化滑块的位置在首页上，然后给栏目块绑定鼠标放上去事件。
?
1.放上去后，计算鼠标所在块的位置
2.获取滑块的位置，然后比较判断滑块是往左还是往右滑动的
3.计算出滑块的弹性位置值，然后设置滑块弹性动画
?
/* demo01 css */
body{
padding: 0px;
border: 0px;
margin: 0px;
}
#main{
margin: auto;
display: block;
width: 1000px;
height: 100%;
text-align: center;
position:relative;
}
#menu{
position: relative;
background: #333;
height: 44px;
width: 100%;
margin-top: 10px;
text-align: center;
overflow: hidden;
}
#slider{
background: red;
height: 44px;
position: absolute;
left: 0px;
}
#menu_ul{
position: absolute;
padding: 0px;
margin: 0px;
border: 0px;
height: 44px;
width: 980px;
padding-left: 0px;
}
li{
padding: 15px 30px;
float: left;
color: #FFF;
font-family: "Microsoft Yahei";
font-weight: 600;
font-size: 14px;
line-height: 14px;
cursor: pointer;
}
?
?
?
原文：http://leietal.iteye.com/blog/2151732