Question

我们都看过那些带有全屏十字光标的军用电影在电脑上，甚至在你看到的一些动画中。

例如，在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>

Answer 1

你可以使用CSS和一个小小的jQuery来实现它。

<强> HTML

<div id="crosshair-h" class="hair"></div>
<div id="crosshair-v" class="hair"></div>

<强>的CSS

*{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;
}

<强>的jQuery

$(function(){
    var cH = $('#crosshair-h'),
        cV = $('#crosshair-v');

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

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

HTML5或JQuery全屏十字光标

1 个答案: