ぬえさぶろうのAnimate放送部

解説

画像のズームって、どういうときに使うもの

商品画像の部分拡大表示などに使うと効果的です。

コンテンツのつくりかた

1. カーソルがサムネール上にあるか判定する
2. フォーカスエリアをカーソルに追従させる
3. 一定時間ごとに画像のフェードイン/フェードアウトを行う

キーワード	用途
mousemove()	マウスの移動 要素内でマウスカーソルが移動した際に呼び出されます。 引数とpageX、pageYプロパティで、マウスカーソルのX座標、Y座標を取得することができます。
offset()	位置の取得 セレクタで指定した要素の位置を取得します。 ページの左上を基準に、offset().topとすることで上からの位置、.offset().leftとすることで左からの位置を取得します。
width()	幅の取得 セレクタで指定した要素の幅をピクセルで取得します。
height()	高さの取得 セレクタで指定した要素の高さをピクセルで取得します。
show()	表示 セレクタで指定した要素を表示します。
hide()	非表示 セレクタで指定した要素を非表示にします。
css	スタイルシートの設定 要素のスタイルシートを設定します。引数は、CSSプロパティとその値を、カンマ区切りで順に並べます。

HTML

<div class="zoom_view">
    <div id="thumb">
        <img src="../../images/kanda/kanda_05.png" alt="thumb">
    <span class="target_cursor"></span>
    <!--/#thumb--></div>
    <div id="zoom">
        <img src="../../images/kanda/kanda_05_large.png" alt="zoom"> 
    <!--/#zoom--></div>
<!--/.zoom_view--></div>

CSS

.zoom_view {
    display: flex;
    flex-direction: column;
  }
  #thumb {
    width: 400px;
    height: 400px;
    border: 2px solid #ccc;
  }
  #thumb img {
    width: 100%;
  }
  .target_cursor {
    width: 40px;
    height: 40px;
    position: absolute;
    display: none;
    border: 1px solid #fff;
    background: rgba(131, 130, 138, .5);
  }
  #zoom {
    width: 400px;
    height: 400px;
    border: 2px solid #ccc;
    overflow: hidden;
    position: relative;
  }
  #zoom img {
    width:2800px;
    height:2800px;
    position: absolute;
    top: 0;
    left: 0;
  }

JS

$(function(){
  // マウスを動かす
  $(window).mousemove(function(e){
    // カーソルが#thumbの中に収まっているかどうか
    if(e.pageX > $("#thumb").offset().left 
    && e.pageX <= $("#thumb").offset().left + $("#thumb").width() 
    && e.pageY >= $("#thumb").offset().top 
    && e.pageY <= $("#thumb").offset().top + $("#thumb").height(){
      // 座標を取得
      var posX = e.pageX;
      var posY = e.pageY;

      // .target_cursor要素が#thumb内に収まるよう調整（横位置）
			if(e.pageX <= $("#thumb").offset().left + 24){
				posX = $("#thumb").offset().left;
			}else if(e.pageX >= $("#thumb").offset().left + $("#thumb").width() - 24){
				posX = $("#thumb").offset().left + $("#thumb").width() - 36;
			}else{
				posX -= 24;
			}

      // .target_cursor要素が#thumb内に収まるよう調整（縦位置）
			if(e.pageY <= $("#thumb").offset().top + 24){
				posY = $("#thumb").offset().top;
			}else if(e.pageY >= $("#thumb").offset().top + $("#thumb").height() - 24){
				posY = $("#thumb").offset().top + $("#thumb").height() - 36;
			}else{
				posY -= 24;
			}

      // .target_cursor要素の位置を、カーソル座標に合わせる
      $(".target_cursor").css({"top":posY, "left":posX});

      // 収まっている：.target_cursor要素を表示
      $(".target_cursor").show();

      // zoom.jpgの位置を調整
      $("#zoom img").css("top", ($("#thumb").offset().top - posY)*10);
      $("#zoom img").css("left", ($("#thumb").offset().left - posX)*10);

    }else{
      // 収まっていない：.target_cursor要素を非表示
      $(".target_cursor").hide();
    }
  });
});