Javascript画像ホバーズームポップウィンドウ

Question

私はこれをゼロから作るようにしていました。

私の考えは、ポップアップバックグラウンドを、ホバリングしているイメージのより大きなバージョンとして設定することです。次に、単一のスプライトイメージを構成するイメージスニペットのコレクションのような背景イメージを移動します。

何か不足しているかどうかわかりません。このデモでは、z-indexを使って残りの画像を隠そうとしていますが、動作していないようです。

110行のコードがあるので、問題がなければデモリンクを投稿するだけです。

Working demo

これはマウスオーバータグ内

でのMouseMoveタグ内であるが、これを使用して、画像の上に置くと考えは/、x座標であり、一次ドライバコードでありますyは更新されています（最初のステップではx、y座標を取得しました）。次に画像が1回追加され、追加画像が絶対位置に設定され、次に変数が作成されます。座標は移動している画像の中心を表し、小さな画像の上にカーソルを置いたところにマッピングされます。

on mouse out、reset。

<script> 
$("#coordinates").empty(); 
     $("#coordinates").append('x: ' + event.clientX + ' ' + ',' + 'y: ' + event.clientY + ' '); 

     // append image 
     if(imageAppended == "none") { 
      $("#zoomed-in").append('<img id="image" src="nicephoto.jpg" width="600px" height="auto" />'); 
      imageAppended = "yes"; 
     } 
     // set background image 
     $("#image").css({ 
      'position' : 'absolute' 
     }); 

     // hover image coordinates 
     var imagePosition  = $("#image-container").position(); 
      imagePositionTop = imagePosition.top, 
      imagePositionLeft = imagePosition.left, 
      imageWidthOffset = (($("#image").width()) /2), // move image by center 
      imageHeightOffset = (($("#image").height()) /2); // move image by center 

     // move the image 
     $("#image").css({ 
      'top' : (event.clientY)-imagePositionTop-imageHeightOffset, 
      'left' : (event.clientX)-imagePositionLeft-imageWidthOffset 
     }); 
</script> 

Answer 1

私はあなたに従いますが、#zoomed-inにoverflow:hiddenを設定しようとわかりません。