実行結果
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript">
$.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>
<!-- CSS -->
<style type="text/css">
.zoomoutmenu {
border:.5em solid #fff;
position:relative;
width:50em; height:23.5em;
}
.panels {
width:50em; height:23.5em;
overflow:hidden;
}
.tabs {
list-style:none;
margin:0; padding:0;
position:absolute;
bottom:0;
z-index:1;
}
.tabs li {
list-style:none;
margin:0; padding:0;
float:left;
display:block;
width:10em;
background-color:#fff;
text-align:center;
}
.tabs li a {
padding:.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:2em;
color:#fff;
margin:0; padding:0;
text-align:right;
}
.panel p {
font-size:1em;
color:#fff;
margin:0; padding:0;
text-align:right;
}
#one { background:url("http://farm4.static.flickr.com/3514/3274514408_1800118ded.jpg") no-repeat center center; }
#two { background:url("http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381.jpg") no-repeat center center; }
#three { background:url("http://farm4.static.flickr.com/3396/3274514302_10521a0a98.jpg") no-repeat center center; }
#four { background:url("http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89.jpg") no-repeat center center; }
#five { background:url("http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5.jpg") no-repeat center center; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://jqueryfordesigners.com/bbc-radio-1-zoom-tabs/'>BBC Radio 1 Zoom Tabs</a></p>
<p>▼画像にマウスオーバーすると、タブ切替で画像を切り替えることができます。</p>
<!-- CODE -->
<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>アボカド シーザーサラダ</h2>
<p>@アボガドダイニング Platinum Lounge</p>
</div>
<div id="two" class="panel">
<h2>アボカド刺</h2>
<p>@アボガドダイニング Platinum Lounge</p>
</div>
<div id="three" class="panel">
<h2>アボカドディップ</h2>
<p>@アボガドダイニング Platinum Lounge</p>
</div>
<div id="four" class="panel">
<h2>ベーコンとアボカドのピザ（トマトソース）</h2>
<p>@アボガドダイニング Platinum Lounge</p>
</div>
<div id="five" class="panel">
<h2>ハニートースト</h2>
<p>@アボガドダイニング Platinum Lounge</p>
</div>
</div>
</div>
<!-- / CODE -->
</div>
</body>
</html>