关于javascript：自定义光标交互点-CSS / JQuery


Custom cursor interaction point - CSS / JQuery

我正在尝试将自定义光标用于在线游戏，在这种情况下，这是狙击范围。

问题是当我通过CSS引用光标时，交互点仍位于图标的左上方，而它必须位于图标的死点才能使光标有意义。

这是光标：

1
cursor:url(http://www.seancannon.com/_test/sniper-scope.cur),default;

这是一个演示：http://jsfiddle.net/9kNyF/

如果将光标中的红点放在我在演示中创建的红点上，则不会触发click事件。您必须尝试将其对准左上角。

如果将光标重新设置为cursor:default;，您会看到click事件触发得很好，这只是"瞄准"光标的问题。

游戏是用JQuery编码的，所以如果我需要在其中添加一些用于光标偏移量或la脚的逻辑，就可以了。理想情况下，我希望它是CSS修复程序。

谢谢！

相关讨论

您只需要在CSS中提供热点的<x>和<y>位置：

在您的示例中，中心恰好位于顶部/左侧24px处(巨大的光标光标哈哈)

1
cursor:url(http://www.seancannon.com/_test/sniper-scope.cur) 24 24,default;

http://jsfiddle.net/9kNyF/15/看到了吗？

相关讨论

用于创建光标的任何工具，都应具有用于管理点击目标区域的选项。您可能会追尾寻找javascript / css解决方案。

相关讨论

就不触发点击事件的情况而言，请尝试将其放置在事件监听器周围。

1
2
3
4
5
$(function(){
    $('#point').click(function(){
        alert('clicked point');
    });
});

以十字准线为中心，使用带有背景图像的div以及使用jQuery将div放在光标上的正确位置可能会更容易。

1
2
3
4
5
6
7
8
$(function(){
    $("body").mousemove(function(e){
        var CrossHairWidth = $('#crosshairs').width();
        var CrossHairHeight = $('#crosshairs').height();
        $('#crosshairs').css('top', e.pageY - (CrossHairHeight / 2));
        $('#crosshairs').css('left', e.pageX - (CrossHairWidth / 2) );
    });
});

然后，您隐藏光标，执行以下操作：
cursor: url(http://www.seancannon.com/_test/transparent.png), default;

相关讨论