用圖片替代cursor光標樣式

鼠標光標樣式有限，可參考http://css-cursor.techstream.org/，自定義光標樣式可用設置cursor:url('xxx.cur'),auto;。還有一種辦法，就是用圖片替代鼠標光標，下面就介紹如何使用之。

 

1.制作光標圖片（ps等工具），注意不要用白底，用透明底，透明底一般為gif或者png格式圖片。

 

圖1 我做的箭頭圖片32*32px

 

2.用一個span標簽包含圖片

<span id="cursorLRArrow" style="display:none;position:absolute;z-index:9998;width:32px;height:32px;background-image:url('left_right_arrow_32.gif');cursor:none;pointer-events:none">
</span>

樣式屬性解釋

display:none 初始不顯示

position:absolute 絕對定位，以left，top控制位置，相對含有(position:relative／absolute)這樣定位的父元素的位置，如果找不到這樣的父元素，相對於body

z-index:9998 層高度，越高越不會被遮擋,最高為2147483647

width,height 設置和圖片一樣的寬高

background-image設置圖片

cursor:none 鼠標光標不顯示

pointer-events:none 不響應鼠標事件，事件可穿透此層，從而不會影響下層元素對鼠標事件的響應

 

3.鼠標光標的替換

$(function(){
        $('body').mousemove(function(e){

        　　 var x = e.pageX; //光標距文檔左距
            var y = e.pageY; //光標距文檔上距

         　  $(this).css('cursor','none');
        　　 $('#cursorLRArrow').css({
        　　　　display:'inline-block',
        　　　　left:(x-15)+'px',
        　　　　top:(y-10)+'px'
        　　 });
        　　 $('#cursorLRArrow').show();

        });    
 });

 

 

4.去試試吧！