移动光标的错觉

Question

是否有可能使图像出现在光标位置(例如，光标图像)，然后隐藏原始图像(cursor:none;)，然后移动图像！给出指针本身移动的错觉，然后使光标出现在光标的图像指向的位置。然后让图像消失。我不确定要不要让光标出现

我读到，出于安全原因，不可能用Javascript移动光标，所以我想仅仅创建它的错觉对我的目的来说是很好的。是或不是就够了！(所以我可以去找)没有发现太多关于在光标位置显示图像的方法！:P

Answer 1

An yes or no will suffice!

是

​

好吧，让我们再深入一点.

我们创建一个div (#bar)，在其中我们希望“自定义”指针在其中，并在其中隐藏实际指针：

<div id="bar">
    <div id="pointer"></div>
</div>

将cursor设置为none以隐藏实际指针，在#pointer中设置图像作为替代：

body {
    padding:50px;
}
#bar {
    background-color: green;
    width: 400px;
    height: 400px;
    cursor: none;
}
#pointer {
    position: absolute;
    width:32px;
    height:32px;
    background-image:url('//i.imgur.com/uKc3VMy.png');
}

添加一些javascript (我采用了jQuery路径，但使用vanilla也是完全可能的)来移动图像，充当指针：

$("#bar").mousemove(function (e) {
    $('#pointer').offset({
        left: e.pageX,
        top: e.pageY
    })
});

样本：http://jsfiddle.net/e9BXg/1/