jquery背景滑动导航菜单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery背景滑动导航菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery背景滑动导航菜单代码</title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/index.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.movebg.js"></script>
</head>

<body>
<!-- 代码 开始 -->
<div class="wraper">
    <div class="nav">
        <ul>
            <li class="nav-item"><a href="http://www.baidu.com/" target="_blank">网站首页</a></li>
            <li class="nav-item cur"><a href="http://www.baidu.com/" target="_blank">网上商城</a></li>
            <li class="nav-item"><a href="http://www.baidu.com/" target="_blank">智能管家</a></li>
            <li class="nav-item"><a href="http://www.baidu.com/" target="_blank">技术支持</a></li> 
            <li class="nav-item"><a href="http://www.baidu.com/" target="_blank">应用案例</a></li> 
            <li class="nav-item"><a href="http://www.baidu.com/" target="_blank">关于我们</a></li>
            <li class="nav-item"><a href="http://www.baidu.com/" target="_blank">标题</a></li>
        </ul>
        <!--移动的滑动-->
        <div class="move-bg"></div>
        <!--移动的滑动 end-->
    </div>
</div>
<script>
$(function(){
	$(".nav").movebg({width:120/*滑块的大小*/,extra:40/*额外反弹的距离*/,speed:300/*滑块移动的速度*/,rebound_speed:400/*滑块反弹的速度*/});
})
</script>

<!-- 代码 结束 -->
</body>
</html>

JS代码(jquery.movebg.js):

(function($){
	$.fn.movebg=function(options){
	var defaults={
	width:120,/*�ƶ���Ĵ�С*/
extra:50,/*�����ľ���*/
speed:300,/*���ƶ����ٶ�*/
rebound_speed:300/*�鷴�����ٶ�*/
}
;
	var defaultser=$.extend(defaults,options);
	return this.each(function(){
	var _this=$(this);
	var _item=_this.children("ul").children("li").children("a");
	/*�ҵ��������黬����Ԫ��*/
var origin=_this.children("ul").children("li.cur").index();
	/*��õ�ǰ����������*/
var _mover=_this.find(".move-bg");
	/*�ҵ�����*/
var hidden;
	/*����һ��������html��û�й涨curʱ������Ƴ���������ʧ*/
if (origin==-1){
	origin=0;
	hidden="1"}
else{
	_mover.show()}
;
	/*���û�ж���cur,��Ĭ�ϴӵ�һ����������*/
var cur=prev=origin;
	/*��ʼ����ǰ������ֵ������һ������ʼֵ;
	*/
var extra=defaultser.extra;
	/*����һ��������ʾ���⻬���ľ���*/
_mover.css({
	left:""+defaultser.width*origin+"px"}
);
	/*���û��鵱ǰ��ʾ��λ��*/
//������꾭���¼�_item.each(function(index,it){
	$(it).mouseover(function(){
	cur=index;
	/*�Ե�ǰ����ֵ���и�ֵ*/
move();
	prev=cur;
	/*������ɶ��ϸ�����ֵ���и�ֵ*/
}
);
}
);
	_this.mouseleave(function(){
	cur=origin;
	/*����뿪����ʱ��ǰ����ֵ�����������ֵ*/
move();
	if(hidden==1){
	_mover.stop().fadeOut();
}
/*��html��û�й涨curʱ������Ƴ���������ʧ*/
}
);
	//��������function move(){
	_mover.clearQueue();
	if(cur<prev){
	extra=-Math.abs(defaultser.extra);
}
/*����ǰֵС���ϸ�����ֵʱ�����⻬��ֵΪ����*/
else{
	extra=Math.abs(defaultser.extra)}
;
	/*����ǰֵ�����ϸ�����ֵʱ������ֵΪ����*/
_mover.queue(function(){
	$(this).show().stop(true,true).animate({
	left:""+Number(cur*defaultser.width+extra)+""}
,defaultser.speed),function(){
	$(this).dequeue()}
}
);
	_mover.queue(function(){
	$(this).stop(true,true).animate({
	left:""+cur*defaultser.width+""}
,defaultser.rebound_speed),function(){
	$(this).dequeue()}
}
);
}
;
}
)}
}
)(jQuery);

CSS代码(index.css):

.wraper{width:1000px;padding-top:100px;margin:0 auto}
.nav{position:relative;width:100%;height:40px;background:#C70757;overflow:hidden}
.nav-item{position:relative;float:left;width:120px;height:40px;line-height:40px;text-align:center;font-size:14px;z-index:1}
.nav-item a{display:block;height:40px;color:#fff;}
.nav-item a:hover{color:#fff}
.move-bg{display:none;position:absolute;left:0;top:0;width:120px;height:40px;background:#4D0B33;z-index:0}

CSS代码(reset.css):

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,iframe{margin:0;padding:0;}
body,button,input,select,textarea{font-family:tahoma,Arial,"Microsoft YaHei",SimSun;font-size:12px;line-height:1.5em;color:#222}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
fieldset,img{border:0;}
img{vertical-align:top}
address,caption,cite,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{display:block;margin:0;padding:0;}
/* HTML5 */
code,kbd,pre,samp{font-family:courier new,courier,monospace}
ol,ul,li{list-style:none;}
a{text-decoration:none;color:#222;}
a:hover{color:#052299;}
a:active{color:#052299;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,select,button{vertical-align:baseline;*vertical-align:middle;font-family:tahoma,\5b8b\4f53,arial;font-size:100%;border:none;background:none;}
input[type=checkbox],input[type=radio]{vertical-align:middle;margin:0 5px;}
input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}
textarea{resize:none;}
textarea{overflow:auto;font:100% tahoma,\5b8b\4f53,arial;}
table{border-collapse:collapse;border-spacing:0;}
/*= �������=*/
.clear{clear:both;height:0px;line-height:0px;font-size:0px;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
/* Hides from IE-mac \*/
* html .clearfix{height:1%;}
/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}
*html{zoom:expression(function(ele){ele.style.zoom = "1";document.execCommand("BackgroundImageCache",false,true)}
(this))}
/* ���Ҹ��� */
.fl{float:left;}
.fr{float:right}

附件:下载该文件资源,减少时间成本(增值服务)