HTML5 or JQuery Full Screen Crosshair Cursor

StackOverflow https://stackoverflow.com/questions/12737615

質問

We've all seen those military movies with that full screen crosshair cursor on the computers, or even in some animations you see it.

For example in the beginning of this video on YouTube titled, "Dishonorable Disclosures" you see exactly what I'm talking about. - https://www.youtube.com/watch?v=X-Xfti7qtT0

Another example is the program "CrossHair 1.1" for Windows - http://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/CrossHair.shtml

I do believe it's possible to do this in HTML5, but have absolutely no idea if it is in JQuery, let alone how to do it in either language. However I'd love to find out so I can do it myself. If anyone has any links, resources, or anything to help out with this as I'm sure others would want to learn how as well. Any help would be greatly appreciated.

Thanks and take care.

Much thanks to "Gaby aka G. Petrioli" for figuring this out. I put the full code down below (with a little styling) to save some of you time.

<!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>
役に立ちましたか？

解決

You can do it with CSS and a tiny 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.clientY);
        cV.css('left',e.clientX);
    });
});

Demo at http://jsfiddle.net/WmZ44/1/

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top