Chúng ta đều đã xem những bộ phim quân sự đó với con trỏ hình chữ thập toàn màn hình trên máy tính, hoặc thậm chí trong một số hình động bạn thấy.HTML5 hoặc JQuery Full Screen Crosshair Cursor
Ví dụ: ở đầu video này trên YouTube có tiêu đề "Tiết lộ không đáng tin cậy" bạn thấy chính xác những gì tôi đang nói đến. - https://www.youtube.com/watch?v=X-Xfti7qtT0
Một ví dụ khác là chương trình "crosshair 1.1" cho Windows - http://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/CrossHair.shtml
tôi tin rằng nó có thể làm điều này trong HTML5, nhưng hoàn toàn không có ý tưởng nếu nó đang trong JQuery, hãy để một mình làm thế nào để làm nó bằng một trong hai ngôn ngữ. Tuy nhiên tôi rất muốn tìm hiểu để tôi có thể tự làm. Nếu bất cứ ai có bất kỳ liên kết, tài nguyên, hoặc bất cứ điều gì để giúp đỡ với điều này như tôi chắc chắn những người khác sẽ muốn tìm hiểu làm thế nào là tốt. Mọi sự trợ giúp sẽ rất được trân trọng.
Cảm ơn và chăm sóc.
Rất cám ơn "Gaby aka G. Petrioli" vì đã tìm ra điều này. Tôi đặt mã đầy đủ xuống dưới (với một kiểu dáng nhỏ) để tiết kiệm thời gian của bạn.
<!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>
Có thể bạn không chỉ tạo ra một hình ảnh lớn của một crosshair và di chuyển nó trên màn hình? –
Vâng, nhưng hình ảnh lớn hơn sử dụng nhiều bộ nhớ hơn và cpu chỉ để tải hình ảnh/tệp. Ngoài ra tôi không biết làm thế nào tôi sẽ xác định nơi mà phần trung tâm của con trỏ sẽ được trong hình ảnh. –
Làm cho hình ảnh với SVG, không cần nó hơn một vài trăm byte. – robertc