自定義光標交互點 - CSS/JQuery

我正在嘗試在線遊戲中使用自定義光標，在這種情況下，它是一個狙擊範圍。自定義光標交互點 - CSS/JQuery

問題是，當我通過CSS引用光標時，交互點仍然是圖標的左上角，而它需要是圖標的死點，以使光標變得有意義。

這裏的光標：

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

這裏有一個演示：http://jsfiddle.net/9kNyF/

如果你把紅點從光標移到紅點我在演示中創建的，也不會觸發點擊事件。你必須嘗試瞄準它的左上角。

如果將光標移回cursor:default;，您會看到點擊事件觸發得很好，這只是「瞄準」光標的問題。

遊戲是用JQuery編碼的，所以如果我需要爲遊標偏移量或其他東西添加一些邏輯，那就這樣吧。理想情況下，我希望這是一個CSS修復。

謝謝！

來源

2011-07-31 AlienWebguy

它在IE9中爲我工作沒有問題。 –

@Jason公平我沒有在IE中測試哈哈，但很高興知道！謝謝:) – AlienWebguy

沒問題。我通常不會與它衝浪......但我今晚在另一臺計算機上。 ;-) –

你只需要提供你的CSS熱點的<x>和<y>位置：

在你的榜樣，中心恰好是從頂部/左24PX（巨大的屁股光標笑）

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

http://jsfiddle.net/9kNyF/15/看到了嗎？

來源

2011-08-01 03:06:48 Maverick

哇 - 夥計+1我甚至不知道這些參數。 – AlienWebguy

謝謝！這裏是我的參考http://css-infos.net/property/cursor – Maverick

哇，我從來沒有見過這些參數。 +1教我新的東西。 – brenjt

只要它不觸發點擊事件，請嘗試將其放置在事件偵聽器中。

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

隨着十字線的中心可能會更易於使用一個div與圖像的背景和使用jQuery到div發生在你的光標在正確的位置。

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

然後，您可以隱藏光標做類似這樣： cursor: url(http://www.seancannon.com/_test/transparent.png), default;

來源

2011-07-31 04:06:42 brenjt

如果設置了某個設置（它是），JSFiddle會自動將代碼包裝在JavaScript面板中。 – icktoofay

但是，如果'＃crosshairs' div總是在光標下方，那麼點擊會如何通過div並單擊我想要在畫布上單擊的內容？ – AlienWebguy

此外，點擊事件的作品，只是十字線缺少重點。如果我瞄準紅色點約15px的下方和'＃wrapper'中紅色點的右邊，我可以用十字線觸發點擊事件。設置'cursor：default;'你會看到你可以點擊它就好了。 – AlienWebguy

任何工具用於創建光標，應該有管理的點擊目標區域的選項。你會追着你尋找一個javascript/css解決方案。

來源

2011-08-01 02:38:49

我其實在線上找到了這個光標。重新制作遊標對我來說很好，但我記得大多數那些製作遊標的應用程序都是陰暗的共享軟件哈哈。任何建議？ – AlienWebguy

@AlienWebguy我發現這是最好的選擇。用於photoshop的插件（適用於Mac上的cs6），可讓您保存曲線文件。 http://www.telegraphics.com.au/svn/icoformat/trunk/dist/README.html – Kostia

自定義光標交互點 - CSS/JQuery

回答

相關問題