Cursore a croce a schermo intero HTML5 o JQuery

Abbiamo visto tutti quei film militari con quel cursore a croce a schermo intero sui computer, o persino in alcune animazioni lo vedete.Cursore a croce a schermo intero HTML5 o JQuery

Ad esempio, all'inizio di questo video su YouTube intitolato "Disconoscenze disonorevoli" si vede esattamente di cosa sto parlando. - https://www.youtube.com/watch?v=X-Xfti7qtT0

Un altro esempio è il programma "CrossHair 1.1" per Windows - http://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/CrossHair.shtml

Credo che sia possibile farlo in HTML5, ma non hanno assolutamente idea se è in JQuery, per non parlare di come fare in entrambe le lingue Comunque mi piacerebbe scoprirlo, così posso farlo da solo. Se qualcuno ha link, risorse, o qualsiasi cosa per dare una mano con questo, sono sicuro che altri vorrebbero imparare anche come. Qualsiasi aiuto sarebbe molto apprezzato.

Grazie e stammi bene.

Mille grazie a "Gaby aka G. Petrioli" per averlo capito. Ho messo il codice completo in basso (con un po 'di stile) per risparmiare un po' di tempo.

<!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>

fonte

2012-10-04 Michael Schwartz

Non puoi semplicemente fare una grande immagine di un mirino e scorrere attraverso lo schermo? –

Sì, ma le immagini più grandi usano più memoria e la cpu solo per caricare l'immagine/il file. Inoltre, non so come definirei la parte centrale del cursore nell'immagine. –

Realizza l'immagine con SVG, non è necessario che superi le poche centinaia di byte. – robertc

Si può fare con i CSS e jQuery un piccolo ..

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); 
    }); 
});

Demo ahttp://jsfiddle.net/WmZ44/1/

fonte

2012-10-05 00:37:33

Grazie mille. Ad ogni modo per nascondere il puntatore del mouse predefinito in sostituzione di questo? –

@ mikethedj4 potresti usare la regola css '* {cursor: none;}' per disabilitarlo completamente. Inoltre dovresti aggiungere 'pointer-events: none' sulla classe' .hair' per far sì che il mirino non interferisca con il normale comportamento del mouse e gli elementi al di sotto di esso .. [** DEMO **] (http: // jsfiddle .net/WmZ44/3 /) (* risposta aggiornata pure *) –

Ho creato un nuovo file index.html e ho importato il codice, ma non funziona. tramite il mirino tramite Mousemove. Puoi spiegare perché? (Ho copiato e incollato così com'è) –

Cursore a croce a schermo intero HTML5 o JQuery

risposta

Problemi correlati