7

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

例如，在 YouTube 上标题为“Dishonorable Disclosures”的这段视频的开头，你会明白我在说什么。- 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>
4

1 回答 1

10

你可以用 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/

于 2012-10-05T00:37:33.530 回答