サムネイル表示領域に拡大画像を表示後、マウス座標と画像連動

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

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>

サンプル

最新の記事

プロフィール

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