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