特效演示地址: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;
}