Question

所以我有一个目标div（大矩形），它将成为目标图像。你将鼠标悬停在这个上方，你会得到一个方形，用相同图像的较大/较高分辨率版本的一部分替换光标。

我有跟踪，我已经偏移，以便div以光标位置为中心但问题是，目标div无法再被拾取，直到光标离开叠加层（超出正方形）。

我该如何解决这个问题？是否可以用div替换光标并仍使用光标？

我正在考虑使用大矩形的左上角坐标然后离开...我仍然不知道。例如，你可以用画布对象替换光标吗？我可能仍然面临没有检测到目标div的问题。我尝试了无效的z-index。

编辑：我可能只是隐藏光标并转到叠加方块的左角，这样看起来你的中心位于你所指向的任何位置。

<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

您可以尝试使用以下代码和标记。通过从页面中的鼠标光标位置减去目标div的位置来计算位置。仅当鼠标位于目标div限制内时，光标窗口才可见。

＆＃13;

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("");
    }
});

＆＃13;

<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>

＆＃13;

Div以光标为中心，充当图像悬停缩放效果的光标

1 个答案: