HTML5 или jQuery полноэкранный курсор перекрестия

мы все видели эти военные фильмы с этим полноэкранным курсором перекрестия на компьютерах или даже в некоторых анимациях, которые вы видите.

например, в начале этого видео на YouTube под названием "бесчестные раскрытия" вы видите именно то, о чем я говорю. - https://www.youtube.com/watch?v=X-Xfti7qtT0

Другим примером является программа "CrossHair 1.1" для Windows - http://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/CrossHair.shtml

Я считаю, что это можно сделать в HTML5, но абсолютно не знаю, находится ли это в JQuery, не говоря уже о том, как это сделать на любом языке. Однако я хотел бы узнать, так что я могу сделать это сам. Если у кого-то есть какие-либо ссылки, ресурсы или что-то, чтобы помочь в этом, как я уверен, другие хотели бы узнать, как это. Любая помощь была бы очень оцененный.

спасибо и берегите себя.

спасибо "Габи г. Petrioli ака" разобравшемуся с этим. Я поместил полный код ниже (с небольшим стилем), чтобы сэкономить время некоторых из вас.

<!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>
6
cursor fullscreen html5 jquery panning

1 ответов

вы можете сделать это с помощью CSS и крошечного 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);
    });
});

демо на http://jsfiddle.net/WmZ44/1/

7