首页 > 代码库 > 用图片替代cursor光标样式

用图片替代cursor光标样式

2024-10-18 04:19:38   202人阅读

鼠标光标样式有限，可参考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.去试试吧！

 

用图片替代cursor光标样式


联系
我们