【发布时间】：2016-09-30 21:09:03
【问题描述】：
所以我有一个目标 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>
【问题讨论】：
-
您不想使用现有的实现吗？例如redopop.com/loupe
-
@YuriGor 你说得有道理。我只是想完成这件事。我可能会这样做。我开始接近画布。我只是不完全理解它。
标签： javascript