Div zentriert auf Cursor als Cursor handeln für Bild-Hover-Zoom-Effekt

Question

So habe ich ein Ziel div (großes Rechteck), die das Zielbild wäre. Sie würden darüber schweben, und Sie würden ein Quadrat erhalten, das den Cursor durch einen Teil einer größeren/höheren Auflösung des gleichen Bildes ersetzt.

Ich habe die Spurhaltung, und ich habe Offset, so dass das div auf die Position des Cursors zentriert ist, aber das Problem ist, das Ziel div kann nicht mehr aufgenommen werden, bis der Cursor die Überlagerung verlässt (außerhalb von das Quadrat).

Wie kann ich das umgehen? Ist es möglich, den Cursor durch das div zu ersetzen und den Cursor weiterhin zu verwenden?

Ich denke, verwenden Sie einfach die obere linke Koordinate des großen Rechtecks ​​und gehen Sie weg ... immer noch weiß ich nicht. Können Sie den Cursor beispielsweise durch ein Canvas-Objekt ersetzen? Ich könnte immer noch das Problem haben, das Ziel div nicht zu erkennen. Ich habe versucht, z-Index, der nicht funktioniert.

edit: Ich könnte einfach den Cursor verstecken und auf die linke Ecke des Overlay-Quadrats gehen, so dass es scheint, dass Sie über alles zentriert sind, worauf Sie angeblich zeigen.

<script type="text/javascript"> 
     // declare variables 
     var target = document.getElementById("target-area"),// $("#target-area") doesn't work? 
      cursWind = $("#cursor-window"), 
      prevX = 0, 
      prevY = 0, 
      cursX = 0, 
      cursY = 0; 
     // tracking 
     // client is using a mouse 
     target.addEventListener("mouseover", function(event) { 
     // run the tracking only while mouse is over the sensor range area 
     target.addEventListener("mousemove", function (event) { 

      /* when the mouse goes over target, a window with the center 
      * at the cursor's position, should appear, this follows 
      the cursor */ 


      /* cursor coordinates */ 
      // get cursor's current X and Y coordinates 
      cursX = event.clientX; 
      cursY = event.clientY; 
      var coordString = cursX + " x" + "," + cursY + " y"; 
      // empty cursor-coord-disp 
      $("#cursor-coord-disp").empty(); 
      // append X and Y coordinates to cursor-coord-disp 
      $("#cursor-coord-disp").append(coordString); 

      /* see if cursor is increasing or decreasing in x/y coordinates */ 
      // x-coord 
      function checkX() { 
      if (cursX > prevX) { 
       prevX = cursX; // update old x-coord 
       return ((-1) * cursX); 
      } 
      else { 
       prevX = cursX; // update old x-coord 
       return cursX; 
      } 
      } 

      function checkY() { 
      if (cursY > prevY) { 
       prevY = cursY; // update old x-coord 
       return ((-1) * cursY); 
      } 
      else { 
       prevY = cursY; // update old x-coord 
       return cursY; 
      } 
      } 

      /* window replaces and follows cursor position */ 
      // get X and Y top-left coordinates of target-area 
      var targPos = $("#target-area").position(), 
       targX = targPos.left, 
       targY = targPos.top; 
      // console.log(targX + " vs " + targY); 
      // show the hovering window that follows cursor 
      $("#cursor-window").show(); 
      // reposition to cursor with offset 
      // console.log(checkX()); 
      var newXCoord = (event.clientX), 
       newYCoord = (event.clientY); 
      console.log(newXCoord + ' vs ' + newYCoord); 
      // translate to cursor position 
      $("#cursor-window").css({ 
      'top' : newYCoord - 150, 
      'left' : newXCoord - 150 
      }); 

     }, false); 
     }, false); 
    </script> 

Answer 1

Sie können mit dem folgenden Code und Markup versuchen. Die Position wird berechnet, indem die Position des Ziel-Div von der Mauszeigerposition auf der Seite subtrahiert wird. Das Cursorfenster ist nur sichtbar, wenn sich die Maus innerhalb der Zieldivgrenzen befindet.

var $target = $("#target-area"), 
 
    $cursorWindow = $("#cursor-window"), 
 
    $coordsDisplay = $("#cursor-coord-disp"); 
 

 
var zoomFactor = 2; 
 

 
// Copy the background image to the zoom window 
 
$cursorWindow.css('background-image', $target.css('background-image')); 
 
$cursorWindow.css('background-repeat', $target.css('background-repeat')); 
 

 
$target.mousemove(function (e) { 
 
    var $targetPosition = $target.position(); 
 
    var cursX = e.pageX - $targetPosition.left; 
 
    var cursY = e.pageY - $targetPosition.top; 
 
    var imgX, imgY, imgW, imgH; 
 

 
    if (0 <= cursX && cursX <= $target.outerWidth() && 0 <= cursY && cursY <= $target.outerHeight()) { 
 
     $cursorWindow.css({ 
 
      'left': cursX - $cursorWindow.outerWidth()/2, 
 
      'top': cursY - $cursorWindow.outerHeight()/2 
 
     }); 
 
     $cursorWindow.show(); 
 
     $coordsDisplay.text("x: " + cursX.toFixed(0) + ", y: " + cursY.toFixed(0)); 
 

 
     imgX = -(cursX * zoomFactor) + $cursorWindow.innerWidth()/2; 
 
     imgY = -(cursY * zoomFactor) + $cursorWindow.innerHeight()/2; 
 

 
     imgW = $target.innerWidth() * zoomFactor; 
 
     imgH = $target.innerHeight() * zoomFactor; 
 

 
     // Change the position and size of the image in the zoom window 
 
     // to show a magnified view of the image content under the cursor 
 
     $cursorWindow.css('background-position', imgX.toFixed(0) + 'px ' + imgY.toFixed(0) + 'px'); 
 
     $cursorWindow.css('background-size', imgW.toFixed(0) + 'px ' + imgH.toFixed(0) + 'px'); 
 
    } else { 
 
     $cursorWindow.hide(); 
 
     $coordsDisplay.text(""); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="cursor-coord-disp" style="width: 140px; height: 24px; border: solid 1px black;"></div> 
 
<div id="target-area" style="cursor: none; position: relative; left: 0px; top: 10px; width: 320px; height: 240px; background: url('http://loremflickr.com/320/240/dog') no-repeat; border: solid 1px black; "> 
 
    <div id="cursor-window" style="display: none; cursor: none; position: absolute; left: 0px; top: 80px; width: 100px; height: 100px; border: solid 1px black;"></div> 
 
</div>