HTML5 或 JQuery 全屏十字光标答案

【问题标题】：HTML5 or JQuery Full Screen Crosshair CursorHTML5 或 JQuery 全屏十字光标
【发布时间】：2012-09-26 02:24:04
【问题描述】：

我们都看过那些在计算机上使用全屏十字光标的军事电影，甚至在你看到的某些动画中。

例如，在 YouTube 上这个标题为“不光彩的披露”的视频的开头，你明白我在说什么。 - https://www.youtube.com/watch?v=X-Xfti7qtT0

另一个例子是 Windows 的“CrossHair 1.1”程序 - http://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/CrossHair.shtml

我确实相信在 HTML5 中可以做到这一点，但完全不知道它是否在 JQuery 中，更不用说如何在任何一种语言中做到这一点了。但是我很想知道，所以我可以自己做。如果有人有任何链接、资源或任何东西可以帮助解决这个问题，我相信其他人也想学习如何。任何帮助将不胜感激。

谢谢，保重。

非常感谢“Gaby aka G. Petrioli”解决了这个问题。我将完整的代码放在下面（带有一点样式）以节省一些时间。

<!DOCTYPE html>
<html>
<head>
<title>Fullscreen Crosshair Cursor</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
html, body {
    cursor:none;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    background-color:#003131;}

a {
    cursor:none;
    color:rgba(255,255,255,0.5);
    text-shadow:0px 0px 8px silver;
    transition:all 300ms ease-in-out;
    -webkit-transition:all 300ms ease-in-out;
    -moz-transition:all 300ms ease-in-out;
    -o-transition:all 300ms ease-in-out;
    -ms-transition:all 300ms ease-in-out;
    border-radius:10px;}

a:hover {
    color:rgba(255,255,255,0.8);
    text-shadow:0px 0px 8px rgba(255,255,255,0.8);}

#crosshair-h {
    width:100%;
    height:2px;
    margin-top:-1px;}

#crosshair-v {
    height:100%;
    width:2px;
    margin-left:-2px;}

.hair {
    position:fixed;
    background-color:rgba(0,250,253,0.5);
    box-shadow:0 0 5px rgb(0,250,253);
    pointer-events:none;
    z-index:1;}
</style>
<script type="text/javascript"> 
$(document).ready(function(){
    var cH = $('#crosshair-h'),
        cV = $('#crosshair-v');

    $(document).on('mousemove',function(e) {
        cH.css('top',e.pageY);
        cV.css('left',e.pageX);
    });

    $("a").hover(function() {
        $(".hair").stop().css({backgroundColor: "white"}, 800);
        $(".hair").stop().css({boxShadow: "0 0 5px rgb(255,255,255)"},800)},
    function() {
        $(".hair").stop().css({backgroundColor: "rgba(0,250,253,0.5)"}, 800);
        $(".hair").stop().css({boxShadow: "0 0 5px rgb(0,250,253)"},800)
    });
});
</script>
</head>
<body>
    <div id="crosshair-h" class="hair"></div>
    <div id="crosshair-v" class="hair"></div>
</body>
</html>

【问题讨论】：

你不能只制作一个十字准线的大图并在屏幕上滚动吗？
是的，但是较大的图像使用更多的内存，而 cpu 只是用于加载图像/文件。另外我不知道如何定义光标的中心部分在图像中的位置。
用SVG制作图片，不需要超过几百字节。
类似这样的东西：jsfiddle.net/j08691/9DRxT/1?

标签： html jquery fullscreen mouse-cursor panning

【解决方案1】：

您可以使用 CSS 和一个小 jQuery ..

$(function(){
    var cH = $('#crosshair-h'),
        cV = $('#crosshair-v');
    
    $(document).on('mousemove',function(e){
        cH.css('top',e.clientY);
        cV.css('left',e.clientX);
    });
});

*{cursor:none;}
#crosshair-h{
    width:100%;
    height:2px;
    margin-top:-1px;
}
#crosshair-v{
    height:100%;
    width:2px;
    margin-left:-1px;
}
.hair{    
    position:fixed;
    background-color:rgba(100,100,100,0.5);
    box-shadow:0 0 5px rgb(100,100,100);
    pointer-events:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="crosshair-h" class="hair"></div>
<div id="crosshair-v" class="hair"></div>

演示地址 http://jsfiddle.net/WmZ44/1/

【讨论】：

非常感谢。无论如何要隐藏默认鼠标指针替换这个？
@mikethedj4 您可以使用 css 规则 *{cursor:none;} 完全禁用它。此外，您应该在.hair 类上添加pointer-events:none，以使十字准线不会干扰鼠标及其下方元素的正常行为。DEMO（更新答案）跨度>
我创建了一个新的 index.html 文件并导入了代码，但它不起作用。通过鼠标移动的十字准线。你能解释一下为什么吗？（我照原样复制粘贴）
你需要包含 jQuery 库。
@ljgww 更新了使用clientX、clientY 而不是page 的答案来处理滚动情况。