設置サンプル
参照：Hover Zoom
▼画像にマウスオーバーしたときに、キャプションをフェードアウトして、画像を縮小してズーム効果をつけます。
<!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" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" ></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="/content/lib/jquery/jquery.gzoom.js" ></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.mousewheel.js" ></script>
<script type="text/javascript">
$(function(){
$('.viewport').mouseenter(function(e) {
$(this).children('a').children('img').animate({ height:'164', left:'0', top:'0', width:'220'}, 100);
$(this).children('a').children('span').fadeIn(200);
}).mouseleave(function(e) {
$(this).children('a').children('img').animate({ height:'179', left:'-20', top:'-20', width:'240'}, 100);
$(this).children('a').children('span').fadeOut(200);
});
});
</script>
<style type="text/css">
/* --- Container configuration ---------------------------------------------------------- */
.viewport {
border:3px solid #eee;
float:left;
width:220px; height:159px;
margin:0 9px 9px 0;
overflow:hidden;
position:relative;
}
/* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
class to the last thumbnail in each row to get rid of the margin-right. */
.no-margin {
margin-right:0;
}
/* --- Link configuration that contains the image and label ----------------------------- */
.viewport a {
display:block;
position:relative;
text-decoration:none;
}
.viewport a img {
width:240px; height:179px;
left:-20px; top:-20px;
position:relative;
}
/* --- Label configuration -------------------------------------------------------------- */
.viewport a span {
display:none;
font-size:2.0em;
font-weight:bold;
width:100%; height:100%;
padding-top:40px;
position:absolute;
text-align:center;
text-decoration:none;
z-index:100;
}
.viewport a span em {
display:block;
font-size:0.45em;
font-weight:normal;
}
/* --- Dark hover background ------------------------------------------------------------ */
.dark-background {
background-color:rgba(15, 15, 15, 0.6);
color:#fff;
text-shadow:#000 0px 0px 20px;
}
.dark-background em {
color:#ccc;
}
</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://mattbango.com/notebook/web-development/hover-zoom-effect-with-jquery-and-css/' target='_blank'>Hover Zoom</a></p>
<p>▼画像にマウスオーバーしたときに、キャプションをフェードアウトして、画像を縮小してズーム効果をつけます。</p>
<!-- CODE -->
<div class="viewport">
<a href="http://www.flickr.com/photos/22559849@N06/5153644500/">
<span class="dark-background">ミルクレープ <em>Photo by php_javascript_room, on Flickr</em></span>
<img src="http://farm5.static.flickr.com/4055/5153644500_b95ccefb3f_m.jpg" alt="ミルクレープ" />
</a>
</div>
<div class="viewport">
<a href="http://www.flickr.com/photos/22559849@N06/5153644500/">
<span class="dark-background">ミルクレープ <em>Photo by php_javascript_room, on Flickr</em></span>
<img src="http://farm5.static.flickr.com/1328/5153659156_0bf5a33280_m.jpg" alt="ミルクレープ" />
</a>
</div>
<br clear="all" />
<!-- / CODE -->
</div>
</body>
</html>