HTML5 lub JQuery Pełnoekranowy kursor krzyża

Wszyscy widzieliśmy te filmy wojskowe za pomocą kursora krzyżyka na pełnym ekranie na komputerach lub nawet w niektórych animacjach, które widzisz.HTML5 lub JQuery Pełnoekranowy kursor krzyża

Na przykład na początku tego filmu na YouTube zatytułowanego "Nieuczciwe ujawnienia" widzisz dokładnie to, o czym mówię. - https://www.youtube.com/watch?v=X-Xfti7qtT0

Innym przykładem jest program „krzyżyk 1.1” dla systemu Windows - http://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/CrossHair.shtml

wierzę, że to możliwe, aby to zrobić w HTML5, ale nie mają żadnego pojęcia, czy to jest w JQuery, nie mówiąc już, jak to zrobić to w każdym języku. Jednak chciałbym się dowiedzieć, że mogę to zrobić sam. Jeśli ktoś ma jakieś linki, zasoby lub cokolwiek, co może pomóc w tym, ponieważ jestem pewien, że inni też chcieliby się tego nauczyć. Każda pomoc będzie bardzo ceniona.

Dziękuję i zachowaj ostrożność.

Podziękowania dla "Gaby aka G. Petrioli" za zrozumienie tego. Umieściłem cały kod poniżej (z niewielką stylizacją), aby zaoszczędzić trochę czasu.

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

Źródło

2012-10-04 Michael Schwartz

Nie można po prostu zrobić duży obraz z celownika i przewinąć go na ekranie? –

Tak, ale większe obrazy zużywają więcej pamięci, a procesor tylko ładuje obraz/plik. Również nie wiem, jak zdefiniowałbym, gdzie środkowa część kursora byłaby na obrazie. –

Utwórz obraz za pomocą SVG, nie potrzeba więcej niż kilkaset bajtów. – robertc

Można to zrobić z CSS i mały 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 nahttp://jsfiddle.net/WmZ44/1/

Źródło

2012-10-05 00:37:33

Dziękuję bardzo. W każdym razie, aby ukryć domyślny wskaźnik myszy zamiast tego? –

@ mikethedj4 można użyć reguły css '* {cursor: none;}', aby całkowicie ją wyłączyć. Powinieneś także dodać 'wskaźnik-zdarzenia: none' w klasie' .hair', aby celownik nie kolidował z normalnym zachowaniem myszy i elementów pod nią .. [** DEMO **] (http: // jsfiddle .net/WmZ44/3 /) (* zaktualizowana odpowiedź również) *) –

Zrobiłem nowy plik index.html i zaimportowałem kod, ale nie działa. przez celownik za pomocą myszy. Czy możesz mi wytłumaczyć dlaczego? (Skopiowałem i wkleiłem tak, jak jest) –

HTML5 lub JQuery Pełnoekranowy kursor krzyża

Odpowiedz

Powiązane problemy