HTML5 oder JQuery Full Screen Crosshair Cursor

Wir haben alle diese Militärfilme mit dem Vollbildschirm-Fadenkreuzcursor auf den Computern gesehen, oder sogar in einigen Animationen, die Sie sehen.HTML5 oder JQuery Full Screen Crosshair Cursor

Zum Beispiel am Anfang dieses Videos auf YouTube mit dem Titel "Dishonorable Disclosures" siehst du genau, wovon ich rede. - https://www.youtube.com/watch?v=X-Xfti7qtT0

Ein weiteres Beispiel ist das Programm „Fadenkreuz 1.1“ für Windows - http://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/CrossHair.shtml

Ich glaube, es ist möglich, dies in HTML5 zu tun, aber absolut keine Ahnung, ob es in JQuery ist, geschweige denn, wie zu tun es in jeder Sprache. Aber ich würde es gerne herausfinden, damit ich es selbst machen kann. Wenn jemand irgendwelche Links, Ressourcen oder irgendetwas hat, um damit zu helfen, wie ich sicher bin, würden andere das auch lernen wollen. Jede Hilfe würde sehr geschätzt werden.

Danke und pass auf dich auf.

Vielen Dank an "Gaby aka G. Petrioli" für das herauszufinden. Ich habe den ganzen Code unten eingefügt (mit ein wenig Styling) um einige von euch Zeit zu sparen.

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

Quelle

2012-10-04 Michael Schwartz

Sie kann nicht nur ein großes Bild von einem Fadenkreuz machen und scrollen über den Bildschirm? –

Ja, aber größere Bilder verwenden mehr Speicher und CPU nur um das Bild/die Datei zu laden. Außerdem weiß ich nicht, wie ich definieren würde, wo der mittlere Teil des Cursors im Bild wäre. –

Machen Sie das Bild mit SVG, nicht mehr als ein paar hundert Bytes. – robertc

Sie tun können, es mit CSS und einem winzigen 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); 
    }); 
});

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

Quelle

2012-10-05 00:37:33

Vielen Dank. Wie auch immer, um den Standardmauszeiger als Ersatz dafür zu verstecken? –

@ mikethedj4 könnten Sie die css-Regel '* {cursor: none;}' verwenden, um sie vollständig zu deaktivieren. Außerdem sollten Sie 'pointer-events: none' in der Klasse' .hair' hinzufügen, damit das Fadenkreuz das normale Verhalten der Maus und der darunter liegenden Elemente nicht beeinträchtigt. [** DEMO **] (http: // jsfiddle .net/WmZ44/3 /) (* aktualisierte Antwort auch *) –

Ich habe eine neue index.html Datei erstellt und den Code importiert, aber es funktioniert nicht. über das Fadenkreuz per Mausklick. Kannst du erklären warum? (Ich habe kopiert und eingefügt, wie es ist) –

HTML5 oder JQuery Full Screen Crosshair Cursor

Antwort

Verwandte Themen