7

私たちは皆、コンピューター上でそのフルスクリーンの十字カーソルを使って、あるいはいくつかのアニメーションでさえそれを見る軍隊の映画を見てきました。

たとえば、YouTubeのこのビデオの冒頭にある「DishonorableDisclosures」では、私が話していることが正確にわかります。-https://www.youtube.com/watch?v=X - Xfti7qtT0

もう1つの例は、Windows用のプログラム「CrossHair1.1」です-http ://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/CrossHair.shtml

HTML5でこれを行うことは可能だと思いますが、どちらの言語で行うかは言うまでもなく、JQueryで行うかどうかはまったくわかりません。しかし、私は自分でそれを行うことができるように見つけたいと思います。他の人も同様に学びたいと思うので、誰かがこれを助けるためのリンク、リソース、または何かを持っているなら。どんな助けでも大歓迎です。

ありがとう、気をつけて。

これを理解してくれた「GabyakaG.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>
4

1 に答える 1

10

CSSと小さなjQueryでそれを行うことができます..

$(function(){
    var cH = $('#crosshair-h'),
        cV = $('#crosshair-v');
    
    $(document).on('mousemove',function(e){
        cH.css('top',e.clientY);
        cV.css('left',e.clientX);
    });
});
*{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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="crosshair-h" class="hair"></div>
<div id="crosshair-v" class="hair"></div>

http://jsfiddle.net/WmZ44/1/のデモ

于 2012-10-05T00:37:33.530 に答える