2

我目前有这个，跟随鼠标光标潜水..但是当我靠近网站的边缘时，它会创建滚动条等，我将如何限制它留在体内并在它超出视野而不是隐藏时隐藏扩展网站..

这是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>

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

4

2 回答 2

1

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

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

body
{
    overflow:hidden;
}

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

于 2013-07-24T09:39:49.750 回答
0

可以尝试以下方法；

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

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

编辑：另外；将以下内容添加到鼠标容器样式中：

mouse-event: none;

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

于 2013-07-24T10:05:00.430 回答