图片渐隐切换菜单 CSS & jQuery

by sunflowamedia ON 2011/03/28 1279

今天介绍一款图片有渐隐效果的菜单切换效果，制作比较简单，测试下来兼容 IE,FF,Safari,Opera等。菜单按钮多少可以按需求添加，范例添加了5个。这款效果比较适合用于时尚商品的展示效果。

Step1. 创建HTML

<li>
    <a href="#" class="pos1">
        <span class="ei_preview"></span>
        <span class="ei_image"></span>
    </a>
    <div class="ei_descr">
        <h2>USOPP</h2>
        <h3>B30,000,00</h3>
        <p>text text text text text text text text text text text text text text text text text text text text text text text text</p>
    </div>
</li>

class=”pos1″, pos1的数字就是你所需要添加menu的个数，pos2. pos3……

Step2. 创建CSS

/* Menu style */
.ei_menu{
	background: #111;
	width: 100%;
	overflow: hidden;
}
.ei_menu ul{
	height: 350px;
	margin: 0;
	padding: 0;
	position: relative;
	display: block;
}
.ei_menu ul li{
	width: 75px;
	height: 350px;
	float: left;
	position: relative;
	overflow: hidden;
	border-right: 2px solid #111;
}
.ei_preview{
	width: 75px;
	height: 350px;
	cursor: pointer;
	position: absolute;
	top: 0px;
	left: 0px;
	background: url(../images/bw.jpg) no-repeat top left;
}
.ei_image{
	width: 75px;
	height: 350px;
	position: absolute;
	left: 75px;
	top: 0px;
	opacity: 0.2;
	background: url(../images/color.jpg) no-repeat top left;
}
.pos1 span{
	background-position:0px 0px;
}
.pos2 span{
	background-position:-75px 0px;
}
.pos3 span{
	background-position:-152px 0px;
}
.pos4 span{
	background-position:-227px 0px;
}
.pos5 span{
	background-position:-302px 0px;
}
.pos6 span{
	background-position:-377px 0px;
}
.ei_descr{
	position:absolute;
	width:278px;
	height:310px;
	border-right:7px solid #f0f0f0;
	padding:20px;
	left:75px;
	top:0px;
	background:#fff;
}
.ei_descr h2{
	font-family: 'Rock Salt', arial, serif;
	font-size: 26px;
	color: #555;
	text-shadow: 0px 0px 1px #fff;
	background: #fff url(../images/stripe_light.gif) repeat top left;
	margin: 0;
	padding: 0;
}
.ei_descr h3{
	font-family: 'Raleway', arial, serif;
	font-size: 1.5em;
	color: #fff;
	text-shadow: 0px 0px 1px #000;
	font-style: normal;
	margin: 0;
	padding: 10px;
	background: #333;
}
.ei_descr p{
	color: #000;
	padding: 10px 5px 0px 5px;
	margin: 0;
	line-height: 18px;
	font-size: 12px;
	font-family: Arial;
	text-transform: uppercase;
}
/* For the index_3 demo */
ul.trigger_list{
	position: absolute;
	right: 20px;
	top: 145px;
}
ul.trigger_list li{
	float: left;
	line-height: 53px;
	color: #ddd;
	font-style: italic;
}
ul.trigger_list li a{
	font-family: 'Rock Salt', arial, serif;
	display: block;
	background: #000;
	color: #ddd;
	line-height: 35px;
	padding: 5px 10px;
	margin: 3px;
	border-radius: 5px 5px 5px 5px;
	text-shadow: 1px 1px 1px #000;
}
ul.trigger_list li a:hover{
	background: #222;
	color: #fff;
}

Step3. 插入jQuery和脚本包

$(function() {
	var $menu				= $('#ei_menu > ul'),
		$menuItems			= $menu.children('li'),
		$menuItemsImgWrapper= $menuItems.children('a'),
		$menuItemsPreview	= $menuItemsImgWrapper.children('.ei_preview'),
		totalMenuItems		= $menuItems.length,

		ExpandingMenu 	= (function(){
			/*
				@current
				set it to the index of the element you want to be opened by default,
				or -1 if you want the menu to be closed initially
			 */
			var current				= 2,
			/*
				@anim
				if we want the default opened item to animate initialy set this to true
			 */
			anim				= false,
			/*
				checks if the current value is valid -
				between 0 and the number of items
			 */
			validCurrent		= function() {
				return (current >= 0 && current < totalMenuItems);
			},
			init				= function() {
					/* show default item if current is set to a valid index */
				if(validCurrent())
					configureMenu();

				initEventsHandler();
			},
			configureMenu		= function() {
					/* get the item for the current */
				var $item	= $menuItems.eq(current);
					/* if anim is true slide out the item */
				if(anim)
					slideOutItem($item, true, 900, 'easeInQuint');
				else{
						/* if not just show it */
					$item.css({width : '400px'})
					.find('.ei_image')
					.css({left:'0px', opacity:1});

						/* decrease the opacity of the others */
						$menuItems.not($item)
								  .children('.ei_preview')
								  .css({opacity:0.2});
				}
			},
			initEventsHandler	= function() {
					/*
					when we click an item the following can happen:
					1) The item is already opened - close it!
					2) The item is closed - open it! (if another one is opened, close it!)
					*/
				$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
					var $this 	= $(this).parent(),
					idx		= $this.index();

					if(current === idx) {
						slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
						current = -1;
					}
					else{
						if(validCurrent() && current !== idx)
								slideOutItem($menuItems.eq(current), false, 250, 'jswing');

						current	= idx;
							slideOutItem($this, true, 250, 'jswing');
					}
					return false;
				});
			},
				/* if you want to trigger the action to open a specific item */
				openItem			= function(idx) {
					$menuItemsImgWrapper.eq(idx).click();
				},
				/*
				opens or closes an item
				note that "mLeave" is just true when all the items close,
				in which case we want that all of them get opacity 1 again.
				"dir" tells us if we are opening or closing an item (true | false)
				*/
			slideOutItem		= function($item, dir, speed, easing, mLeave) {
				var $ei_image	= $item.find('.ei_image'),

				itemParam	= (dir) ? {width : '400px'} : {width : '75px'},
				imageParam	= (dir) ? {left : '0px'} : {left : '75px'};

					/*
					if opening, we animate the opacity of all the elements to 0.1.
					this is to give focus on the opened item..
					*/
				if(dir)
				/*
						alternative:
						$menuItemsPreview.not($menuItemsPreview.eq(current))
										 .stop()
										 .animate({opacity:0.1}, 500);
				 */
					$menuItemsPreview.stop()
				.animate({opacity:0.1}, 1000);
				else if(mLeave)
					$menuItemsPreview.stop()
				.animate({opacity:1}, 1500);

					/* the <li> expands or collapses */
				$item.stop().animate(itemParam, speed, easing);
					/* the image (color) slides in or out */
				$ei_image.stop().animate(imageParam, speed, easing, function() {
						/*
						if opening, we animate the opacity to 1,
						otherwise we reset it.
						*/
					if(dir)
						$ei_image.animate({opacity:1}, 2000);
					else
						$ei_image.css('opacity', 0.2);
				});
			};

			return {
				init 		: init,
				openItem	: openItem
			};
		})();

	/*
	call the init method of ExpandingMenu
	*/
	ExpandingMenu.init();

/*
if later on you want to open / close a specific item you could do it like so:
ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing)
*/
});

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

Download