如何将图像用作网站上的光标?

时间:2015-05-09 01:26:42

标签: javascript jquery html css

我想要一个482 x 519 .png文件成为我网站上的指针。我不想使用CSS游标属性,因为这不适合我想做的事情。我是网站设计的新手,所以请帮助我,我会理解。我想要的只是图像覆盖鼠标指针,但仍保持功能。图像文件也与html文件位于同一目录中。

(我可以在我的网站上使用jQuery,所以任何涉及jQuery的解决方案都可以。)

1 个答案:

答案 0 :(得分:1)

确定!所以我们只能 sorta 在没有CSS的情况下这样做。

我们只能使用jQuery做的是将图像移动到光标下方。这对此有用:

$(document).mousemove(function() {
    var mouseY = event.pageY;
    var mouseX = event.pageX;

    if(mouseY && mouseX) {
        console.log(mouseX, mouseY);

        $(".under-cursor").offset({
            top: mouseY,
            left: mouseX
        });
    }
});

问题是这仍然可以看到光标。这个 CSS 会隐藏光标:

html {
    cursor: none;
}

这是一个使用此JavaScript和CSS的工作JSFiddle:http://jsfiddle.net/br1ckb0t/gsycumyy/

但CSS有两个缺点:

  1. 它使用CSS。
  2. 然后鼠标无法使用。
  3. 所以你可能想要:

    1. 使用CSS。
    2. 或:

      1. 使用我编写的JavaScript并允许鼠标​​光标停留。
      2. 这有道理吗?希望你明白这一点!