Welcome, Old Sport!

图片放大缩小的选项卡切换功能

by ilikecss ON 2012/09/07 4885

图片放大缩小的选项卡切换功能

改版前的BBC的栏目效果,当时把它给扒了下来,因为类似选项卡效果比较多所以一直没放到网上,今天在这里放给大家欣赏下载。鼠标经过图片时会收缩,移开会恢复。Demo图片仅供参考(来源Crezalyn Nerona Uratsuji),请勿转载用于商业用途。

Step1. 创建HTML

<ul class="tabs">
    <li><a href="#one">1</a></li>
    <li><a href="#two">2</a></li>
    <li><a href="#three">3</a></li>
    <li><a href="#four">4</a></li>
    <li><a href="#five">5</a></li>
</ul>
<div class="panels">
    <div id="one" class="panel">
    <h2>Crezalyn Nerona Uratsuji</h2>
    </div>
    <div id="two" class="panel">
    <h2>Rabbit Kits</h2>
    </div>
    <div id="three" class="panel">
    <h2>Kitty relaxing</h2>
    </div>
    <div id="four" class="panel">
    <h2>Puppy</h2>
    </div>
    <div id="five" class="panel">
    <h2>Little Bunnies</h2>
    </div>        
</div>

Step2. 创建CSS


.menu {
  border: 0.5em solid #fff;
  position: relative;
  height: 23.5em;
  width: 50em;
  margin: 0 auto;
}
.panels {
  height: 23.5em;
  width: 50em;
  overflow: hidden;
}
.tabs {
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 0;
  z-index: 1;
}
.tabs li {
  float: left;
  display: block;
  width: 10em;
  background-color: #fff;
  text-align: center;
}
.tabs li a {
  padding: 0.2em;
  display: block;
  text-decoration: none;
  color: #000;
  border-top: 5px solid #fff;
  font-size: 1.3em;
}
.tabs li a:hover {
  border-top: 5px solid #333;
  background-color: #666;
  color: #fff;
}
.panel {
  background: #ccc;
  padding: 1em;
  height: 21.5em;
  position: relative;
}
.panel h2 {
  font-size: 3em;
  color: #fff;
  font-family: Garamond, times, serif;
  margin: 0;
  position: absolute;
  top: 0;  
  right: 0;
}
#one {
  background: url(../images/1.jpg) no-repeat center center;
}
#two {
  background: url(../images/2.jpg) no-repeat center center;
}
#three {
  background: url(../images/3.jpg) no-repeat center center;
}
#four {
  background: url(../images/4.jpg) no-repeat center center;
}
#five {
  background: url(../images/5.jpg) no-repeat center center;
}

Step3. 插入jQuery和脚本包

$.fn.tabs = function (zoomPercent, easing) {
	if (!zoomPercent) zoomPercent = 10;
	
	return this.each(function () {
		var $tab = $(this);
		var $tabs = $tab.find('.tabs');
		var height = $tabs.height();
		
		var panelIds = $tabs.find('a').map(function () {
			return this.hash;
		}).get().join(',');
		
		$tab.find('> div').scrollTop(0);
		
		var $panels = $(panelIds);
		var images = [];
		
		$panels.each(function () {
			var $panel = $(this),
				bg = ($panel.css('backgroundImage') || "").match(/url\s*\(["']*(.*?)['"]*\)/),
				img = null;
			
			if (bg !== null && bg.length && bg.length > 0) {
				bg = bg[1];
				img = new Image();
				
				$panel.find('*').wrap('<div style="position: relative; z-index: 2;" />');                    
				$panel.css('backgroundImage', 'none');
				
				$(img).load(function () {
					var w = this.width / 10;
					var wIn = w / 100 * zoomPercent;
					var h = this.height / 10;
					var hIn = h / 100 * zoomPercent;
					var top = 0;
					
					var fullView = {
						height: h   'em',
						width: w   'em',
						top: top,
						left: 0
					};
											
					var zoomView = {
						height: (h   hIn)   'em',
						width: (w   wIn)   'em',
						top: top,
						left: '-'   (wIn / 2)   'em'
					};
					
					$(this).data('fullView', fullView).data('zoomView', zoomView).css(zoomView);

				}).prependTo($panel).css({'position' : 'absolute', 'top' : 0, 'left' : 0 }).attr('src', bg);
				
				images.push(img);
			}
		});
		
		function zoomImages(zoomType, speed) {
			$(images).each(function () {
				var $image = $(this);
				if ($image.is(':visible')) {
					$image.stop().animate($image.data(zoomType), speed, easing);
				} else {
					$image.css($image.data(zoomType), speed);
				}
			});
		}
					
		$tabs.height(0).hide(); // have to manually set the initial state to get it animate properly.
		
		// this causes opear to render the images with zero height and width for the hidden image
		// $panels.hide().filter(':first').show();
		var speed = 200 //画像缩放的速度;
		
		$tab.hover(function () {
			// show and zoom out
			zoomImages('fullView', speed);
			$tabs.stop().animate({ height : height }, speed, easing);
		}, function () {
			// hide and zoom in
			zoomImages('zoomView', speed);
			$tabs.stop().animate({ height : 0 }, speed, easing, function () {
			  $tabs.hide();
			});
		});
		
		var hoverIntent = null;
		$tabs.find('a').hover(function () {
			clearTimeout(hoverIntent);
			var el = this;
			hoverIntent = setTimeout(function () {
				$panels.hide().filter(el.hash).show();
			}, 100 //TAB切换的速度);
		}, function () {
			clearTimeout(hoverIntent);
		}).click(function () {
			return false;
		});
	});
};
$(function () {
	$('.menu').tabs(10 //画像缩放距离,调整数值控制);
});
3条评论
  1. #1

    香水说道:

    楼主的站很干净 给力!

  2. #2

    兔斯基的萝卜耶夫说道:

    不错 :!:




TOP