Question

我正在学习如何创建一个脚本，在鼠标光标后面创建一个圆圈，类似于下面的脚本： https://www.kirupa.com/canvas/follow_mouse_cursor.htm

此脚本会使整个网站变暗，但圆圈内的部分除外，该部分将以正常亮度显示。

但是，使用作者的画布方法，用户无法与下方的网站进行互动，因为网站上有覆盖图。

赞赏任何意见。

Answer 1

由于HTML在图层中工作，因此无法在鼠标下方放置元素并与下方的元素正确交互。

相反，您可能想要考虑的内容，而不是只显示鼠标下的内容，隐藏鼠标下的所有内容。

可以通过创建与光标保持多个像素的元素，在网站中留下一个窗口来实现。

我在JSFiddle上做了一个这样的例子，这是使用JQuery的重要部分（尽管它也可以很容易地在计划JS中完成）。

var offset = 50; //the area around the cursor that is visible

$("body").mousemove(function(e){
    var newPos = (e.pageX - offset);
    $("#left").width(newPos);
    $("#top,#bottom").css("left", newPos);

    newPos = (window.innerWidth - (e.pageX + (offset + 17)));
    $("#right").width(newPos);

    newPos = (e.pageY - offset);
    $("#top").height(newPos);

    newPos = (window.innerHeight - (e.pageY + offset));
    $("#bottom").height(newPos);
})

JSFiddle with full code.请注意，文本仍可照常选择。

在不破坏可用性的情况下创建游标跟随脚本

1 个答案: