Javascript圖像懸停縮放彈出窗口

Question

我試圖從頭開始。

我的想法是將彈出背景設置爲更大版本的圖像懸停。然後，您將背景圖像像構成單個精靈圖像的圖像片段集合一樣移動。

我不知道我是否錯過了一些東西。在這個演示中，我試圖通過使用z-index來隱藏圖像的其餘部分，但它似乎並沒有工作。

有110行代碼，所以我只是發佈工作演示鏈接，如果沒關係。

Working demo

這是主要的驅動程序代碼，雖然

這就是鼠標移動標籤，它是鼠標懸停標籤

的想法是，當你將鼠標懸停在圖像，座標x內內/ y被更新（第一步我得到x，y座標），然後圖像被附加一次，附加圖像被設置爲絕對定位，然後創建一些變量，現在座標表示正在移動的圖像的中心，映射到懸停在小圖像上的光標。

在鼠標輸出，重置。

<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

我不知道我跟着你，但嘗試設置overflow:hidden上#zoomed-in。