jquery-导航条滑块特效（2014-11-03 ）

浏览数：33 / 时间：2015年06月09日

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery-导航条滑块特效（2014-11-03 ）