HTML5 o JQuery Pantalla completa Crosshair Cursor

Todos hemos visto esas películas militares con ese cursor de cruz de pantalla completa en las computadoras, o incluso en algunas animaciones que usted vea.HTML5 o JQuery Pantalla completa Crosshair Cursor

Por ejemplo, al comienzo de este video en YouTube titulado, "Divulgaciones deshonrosas", verá exactamente de lo que estoy hablando. - https://www.youtube.com/watch?v=X-Xfti7qtT0

Otro ejemplo es el programa "CrossHair 1.1" para Windows - http://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/CrossHair.shtml

yo creo que es posible hacer esto en HTML5, pero no tienen ni idea de si está en jQuery, y mucho menos cómo hacerlo en cualquiera de los dos idiomas Sin embargo, me encantaría descubrirlo para poder hacerlo yo mismo. Si alguien tiene enlaces, recursos o cualquier cosa para ayudar con esto, estoy seguro de que otros querrían saber cómo hacerlo. Cualquier ayuda sería muy apreciada.

Gracias y cuidado.

Muchas gracias a "Gaby aka G. Petrioli" por resolver esto. Puse el código completo a continuación (con un poco de estilo) para ahorrar algo de tiempo.

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

Fuente

2012-10-04 Michael Schwartz

no puedes hacer una gran imagen de una cruz y desplazarse por la pantalla? –

Sí, pero las imágenes más grandes usan más memoria y la CPU solo para cargar la imagen/archivo. Además, no sé cómo definiría dónde estaría la parte central del cursor en la imagen. –

Haz la imagen con SVG, sin necesidad de más de unos cientos de bytes. – robertc

Puede hacerlo con CSS y jQuery una pequeña ..

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 enhttp://jsfiddle.net/WmZ44/1/

Fuente

2012-10-05 00:37:33

Muchas gracias. De todos modos para ocultar el puntero del mouse por defecto en reemplazar por esto? –

@ mikethedj4 puede usar la regla css '* {cursor: none;}' para desactivarlo por completo. También debe agregar 'pointer-events: none' en la clase' .hair' para que la cruz no interfiera con el comportamiento normal del mouse y los elementos debajo de él .. [** DEMO **] (http: // jsfiddle .net/WmZ44/3 /) (* respuesta actualizada también *) –

Hice un nuevo archivo index.html e importé el código, pero no está funcionando. a través de la cruz a través de mousemove. ¿Puedes explicar porque? (He copiado y pegado tal como está) –

HTML5 o JQuery Pantalla completa Crosshair Cursor

Respuesta

Cuestiones relacionadas