Question

我目前有this，在鼠标光标后潜水..但是当我靠近网站的边缘时，它会创建滚动条等等，我如何限制它留在身体并隐藏当它出于视线而不是扩展网站..

这是JS;

var mouseX = 0, mouseY = 0;
$(document).mousemove(function(e){
   mouseX = e.pageX;
   mouseY = e.pageY; 
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp) / 1;
    yp += (mouseY - yp) / 1;
    follower.css({left:xp+5, top:yp+5});

}, 30);

这是CSS：

#follower{
  position : absolute;
  background-color : red;
  color : white;
  padding : 10px;
}

然后是HTML：

<div id="follower">Move your mouse</div>

任何帮助都非常感谢..谢谢

Answer 1

可以尝试以下内容;

<div id="mousecontainer" style="position: fixed; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden;">
    <div id="follower" />
</div>

然后使用clientX而不是pageX，所以位置相对于屏幕而不是页面位置

编辑：另外;将以下内容添加到mousecontainer样式：

mouse-event: none;

这将允许页面的其余部分按预期运行

Answer 2

您需要将包含元素的overflow属性设置为hidden

在你的小提琴中你可以添加

body
{
    overflow:hidden;
}

到你的CSS - http://jsfiddle.net/xYJwF/1/

鼠标光标跟随器限制为正文

2 个答案: