<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基于jQuery图片缩放tab切换效果_网页模板</title>
<style type="text/css" media="screen">
body {
background: #eee;
font-size: 62.5%;
font-family: helvetica, arial, sans-serif;
}
.zoomoutmenu {
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;
padding: 1em;
margin: 0;
text-align: right;
}
#one {
background: url(images/one.jpg) no-repeat center center;
}
#two {
background: url(images/two.jpg) no-repeat center center;
}
#three {
background: url(images/three.jpg) no-repeat center center;
}
#four {
background: url(images/four.jpg) no-repeat center center;
}
#five {
background: url(images/five.jpg) no-repeat center center;
}
</style>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$.fn.zoomtabs = function (zoomPercent, easing) {
if (!zoomPercent) zoomPercent = 10;
return this.each(function () {
var $zoomtab = $(this);
var $tabs = $zoomtab.find('.tabs');
var height = $tabs.height();
var panelIds = $tabs.find('a').map(function () {
return this.hash;
}).get().join(',');
$zoomtab.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;
$zoomtab.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);
}, function () {
clearTimeout(hoverIntent);
}).click(function () {
return false;
});
});
};
$(function () {
$('.zoomoutmenu').zoomtabs(15);
});
</script>
</head>
<body>
<div class="zoomoutmenu">
<ul class="tabs">
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
<li><a href="#four">Four</a></li>
<li><a href="#five">Five</a></li>
</ul>
<div class="panels">
<div id="one" class="panel">
<h2>Garden life</h2>
</div>
<div id="two" class="panel">
<h2>Lego</h2>
</div>
<div id="three" class="panel">
<h2>Berlin</h2>
</div>
<div id="four" class="panel">
<h2>New York</h2>
</div>
<div id="five" class="panel">
<h2>Hungary</h2>
</div>
</div>
</div>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
