サムネイル上のマウス座標と拡大画像の表示位置を連動

サムネイルの横に拡大された画像を表示し、サムネイル上のマウスに合わせて拡大画像が移動

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>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について