Question

我试图检测屏幕的哪一半（左/右）是鼠标光标，因此我可以相应地设置自定义光标。

这是我的代码：

var elementHalfWidth = $('#myelement').width() / 2;
// #myelement takes full window

$('#myelement').on('mousemove', function (e) {

    if (e.pageX < elementHalfWidth) {
        $(this).css( 'cursor', 'url(assets/img/cursorL.png), auto' );
    }
    else {
        $(this).css( 'cursor', 'url(assets/img/cursorR.png), auto' );
    }

});

HTML：

<body><div id="myelement"></div></body>

CSS：

body {position:relative;}
#myelement {position: absolute;top:0;left:0;right:0;bottom:0;}

问题是每次鼠标移动都会触发光标更改，因此效率不高（并且光标也会从自定义闪烁到自动，可能与之相关）。

我无法找到一种只在需要时触发光标变换的方法（即当光标穿过屏幕的一半时）。

Answer 1

我不了解您正在处理的元素，但希望这对您有所帮助：

<style type="text/css">
    html,body{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>

<script type="text/javascript">
  $(window).on('mousemove', function(e){
   var lSide=$(this).width()/2;
   var cursorImg=e.pageX<lSide ? 'cursorL' : 'cursorR';
   $('body').css({"cursor":"url('assets/img/"+cursorImg+".png'), auto"});
   console.log(cursorImg) // Just to see check it ;)
  })
</script>

窗口是屏幕，正文是您要显示光标的元素。

jQuery - mousemove：正确检测屏幕的哪一半是光标

1 个答案: