Question

我有一个div跟随屏幕周围的光标。如何告诉脚本仅在页面的特定区域中执行此操作？

$(document).bind('mousemove', function(e){
$('.galleria-counter').css({
left:  e.pageX,
top:   e.pageY
});
});

JSFIDDLE - https://jsfiddle.net/83k4ahdm/1/

感谢。

Answer 1

不介意我发布另一个我认为最“正确”的答案：

$('#here').hover(function() {

  $(this).on('mousemove', function(e) {

    $('.galleria-counter').css({
    left: e.pageX,
    top: e.pageY
    });
  });

},
function() {

  $(this).off('mousemove'); 
});

https://jsfiddle.net/83k4ahdm/5/

Answer 2

将脚本绑定到div而不是文档

 $('#here').bind('mousemove', function(e){
$('.galleria-counter').css({
left:  e.pageX,
top:   e.pageY
});
});

更新小提琴：fiddle

Answer 3

首先，当您想要移动某些内容并优先进行翻译时，尽量不要使用left和top属性：transform

其次，你可以通过尝试这样的方式来划定你的电话：

if( e.pageX >= div.offset().left && 
    e.pageX <= div.offset().left + div.width || 
    e.pageY >= div.offset().top && 
    e.pageY <= div.offset().top + div.height ) {
  $('.galleria-counter').css({
    left:  e.pageX,
    top:   e.pageY
  });
}

希望有所帮助：）

带有以下div的游标

3 个答案: