Điểm tương tác con trỏ tùy chỉnh - CSS/JQuery

Question

Tôi đang cố sử dụng con trỏ tùy chỉnh cho trò chơi trực tuyến, trong trường hợp này đó là phạm vi bắn tỉa.

Vấn đề là khi tôi tham chiếu con trỏ qua CSS, điểm tương tác vẫn ở trên cùng bên trái của biểu tượng, trong khi đó cần phải là trung tâm chết của biểu tượng cho con trỏ để tạo bất kỳ ý nghĩa nào.

Đây là con trỏ:

cursor:url(http://www.seancannon.com/_test/sniper-scope.cur),default; 

Dưới đây là một bản demo: http://jsfiddle.net/9kNyF/

Nếu bạn đặt dấu chấm đỏ từ con trỏ qua các dấu chấm màu đỏ Tôi tạo ra trong bản demo, nó sẽ không bắn các nhấp chuột biến cố. Bạn phải cố gắng nhắm vào góc trên cùng bên trái của nó.

Nếu bạn đặt con trỏ trở lại cursor:default; bạn sẽ thấy sự kiện nhấp nháy chỉ hoạt động tốt, đó chỉ là vấn đề "nhắm" con trỏ.

Trò chơi được mã hóa trong JQuery vì vậy nếu tôi cần phải thêm một số logic ở đó để bù đắp con trỏ hoặc một cái gì đó lame, do đó, được nó. Lý tưởng nhất là tôi muốn đây là một bản sửa lỗi CSS.

Cảm ơn!

Answer 1

Bạn chỉ cần cung cấp <x> và <y> vị trí của điểm nóng trong CSS của bạn:

Trong ví dụ của bạn, trung tâm sẽ xảy ra là 24px từ đầu/trái (con trỏ ass lớn lol)

cursor:url(http://www.seancannon.com/_test/sniper-scope.cur) 24 24,default; 

http://jsfiddle.net/9kNyF/15/ xem?

Answer 2

Khi không kích hoạt sự kiện nhấp, hãy thử đặt điều này xung quanh trình xử lý sự kiện của bạn.

$(function(){ 
    $('#point').click(function(){ 
     alert('clicked point'); 
    }); 
}); 

Với việc căn giữa các sợi ngang, có thể dễ dàng hơn khi sử dụng div trên nền của hình ảnh và sử dụng jQuery để đặt con trỏ lên vị trí chính xác.

<div id="crosshairs"></div> 
<script> 
$(function(){ 
    $("body").mousemove(function(e){ 
     var CrossHairWidth = $('#crosshairs').width(); 
     var CrossHairHeight = $('#crosshairs').height(); 
     $('#crosshairs').css('top', e.pageY - (CrossHairHeight/2)); 
     $('#crosshairs').css('left', e.pageX - (CrossHairWidth/2)); 
    }); 
}); 
</script> 

Bạn sau đó giấu con trỏ làm một cái gì đó giống như vậy: cursor: url(http://www.seancannon.com/_test/transparent.png), default;

Answer 3

bất cứ công cụ mà bạn sử dụng để tạo các con trỏ, nên có một tùy chọn để quản lý khu vực nhấp chuột mục tiêu. Bạn sẽ theo đuổi bạn đuôi tìm kiếm một giải pháp javascript/css.