jquery鼠标滑过导航条显示二级菜单和对应的背景图片切换



91 362 121



特效描述:滑过导航显示 二级菜单 背景图片切换,

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/styleIE6.css" type="text/css" media="screen"/>

2. 引入JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bgpos.js"></script>

3. HTML代码

<div id="menuWrapper" class="menuWrapper bg1">
	<ul class="menu" id="menu">
		<li class="bg1" style="background-position:0 0;">
			<a id="bg1" href="#">Our Passion</a>
			<ul class="sub1" style="background-position:0 0;">
				<li><a href="#">Submenu 1</a></li>
				<li><a href="#">Submenu 2</a></li>
				<li><a href="#">Submenu 3</a></li>
			</ul>
		</li>
		<li class="bg1" style="background-position:-266px 0px;">
			<a id="bg2" href="#">Our Brands</a>
			<ul class="sub2" style="background-position:-266px 0;">
				<li><a href="#">Submenu 1</a></li>
				<li><a href="#">Submenu 2</a></li>
				<li><a href="#">Submenu 3</a></li>
			</ul>
		</li>
		<li class="last bg1" style="background-position:-532px 0px;">
			<a id="bg3" href="#">Contact</a>
			<ul class="sub3" style="background-position:-266px 0;">
				<li><a href="#">Submenu 1</a></li>
				<li><a href="#">Submenu 2</a></li>
				<li><a href="#">Submenu 3</a></li>
			</ul>
		</li>
	</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript">
$(function() {
	/* position of the <li> that is currently shown */
	var current = 0;
	var loaded  = 0;
	for(var i = 1; i <4; ++i)
		$('<img />').load(function(){
			++loaded;
			if(loaded == 3){
				$('#bg1,#bg2,#bg3').mouseover(function(e){
					var $this = $(this);
					/* if we hover the current one, then don't do anything */
					if($this.parent().index() == current)
						return;
					/* item is bg1 or bg2 or bg3, depending where we are hovering */
					var item = e.target.id;
					/*
					this is the sub menu overlay. Let's hide the current one
					if we hover the first <li> or if we come from the last one,
					then the overlay should move left -> right,
					otherwise right->left
					 */
					if(item == 'bg1' || current == 2)
						$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-266px 0)"},300,function(){
							$(this).find('li').hide();
						});
					else
						$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
							$(this).find('li').hide();
						});
					if(item == 'bg1' || current == 2){
						/* if we hover the first <li> or if we come from the last one, then the images should move left -> right */
						$('#menu > li').animate({backgroundPosition:"(-800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
						move(1,item);
					}
					else{
						/* if we hover the first <li> or if we come from the last one, then the images should move right -> left */
						$('#menu > li').animate({backgroundPosition:"(800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
						move(0,item);
					}
					/*
					We want that if we go from the first one to the last one (without hovering the middle one),
					or from the last one to the first one, the middle menu's overlay should also slide, either
					from left to right or right to left.
					 */
					if(current == 2 && item == 'bg1'){
						$('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-266px 0)"},300);
					}
					if(current == 0 && item == 'bg3'){
						$('#menu .sub'+parseInt(current+2)).stop().animate({backgroundPosition:"(266px 0)"},300);
					}
					/* change the current element */
					current = $this.parent().index();
					/* let's make the overlay of the current one appear */
					$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
						$(this).find('li').fadeIn();
					});
				});
			}	
		}).attr('src', 'images/'+i+'.jpg');
	/*
	dir:1 - move left->right
	dir:0 - move right->left
	 */
	function move(dir,item){
		if(dir){
			$('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
			$('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
			$('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},400,function(){
				$('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
			});
		}
		else{
			$('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
				$('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
			});
			$('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
			$('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},200);
		}
	}
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 背景切换 大图切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到