jquery鼠標滑過導航條顯示二級菜單和對應的背景圖片切換



96 382 128



特效描述:滑過導航顯示 二級菜單 背景圖片切換,

代碼結構

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

加群請備注:從官網了解到

老夫子电子