サムネイル表示領域に拡大画像を表示後、マウス座標と画像連動
サムネイルが表示されていた位置に拡大された画像を表示し、マウスに合わせて画像が移動
jQuery
$(function () {
// プリロード
$('<img>').attr('src', '/img/full.jpg');
$('img').mousemove(function(e){
// マウス座標から画像の相対座標を計算
var img_x = ($(this).width() - 320) / 320 * (e.clientX - $('#frame').offset().left);
var img_y = ($(this).height() - 240) / 240 * (e.clientY - $('#frame').offset().top);
$(this).css({'left': -img_x, 'top': -img_y});
});
$('img').click(function (e) {
var img_src = $(this).attr('src');
if (img_src.match(/thumb/)) {
// 拡大画像を表示
var img_full = $(this).attr('src').replace('thumb', 'full');
$('img').fadeOut('fast', function() {
$(this).attr('src', img_full).fadeIn();
// マウス座標から画像の相対座標を計算
var img_x = ($('img').width() - 320) / 320 * (e.clientX - $('#frame').offset().left);
var img_y = ($('img').height() - 240) / 240 * (e.clientY - $('#frame').offset().top);
$(this).css({'left': -img_x, 'top': -img_y});
});
} else {
// 元画像（サムネイル）を表示
var img_thumb = $(this).attr('src').replace('full', 'thumb');
$('img').fadeOut('fast', function() {
// leftとtopは初期値
$(this).attr('src', img_thumb).css({'left': 0, 'top': 0}).fadeIn();
});
}
});
});
CSS
#frame {
position: relative;
overflow: hidden;
height: 240px;
width: 320px;
}
img {
position: absolute;
}
HTML
<div id="frame">
<img src="/img/thumb.jpg">
</div>
サンプル
