Question

我创建了一个与光标一起移动的网页背景。你可以在这里看到它的动作：http://jsfiddle.net/juhant/jxthp/32/

但是，只要我在网页上添加了一些内容，移动就不再适用了。当光标悬停在文本，图像或任何内容上时，背景图像停止移动。我怎样才能让它正常工作？

HTML看起来像这样：

<body>
<div id="pageBg"></div>
<div class="container">
  <div class="sixteen columns"> <img src="images/logo.png" id="logo" class="scale-with-grid" alt="webweaver logo"/> </div>
  <!--end sixteen columns-->

  <div class="sixteen columns">
    <h1>Just testing</h1>
    <br />

    <h2>Just testing</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <!--end sixteen columns-->


</div>
<!-- container -->

我尝试通过将pageBG id移动到body标签来修复它，这使得它正常工作，但是我无法控制图像的高度。我不希望它无限期地扩展，因为我想稍后在它下面添加一些其他内容。

提前谢谢。

Answer 1

问题是因为mousemove事件没有传播到包含内容的#pageBg元素。将活动挂起document而不是：

$(document).mousemove(function (e) {
    var mousePosX = (e.pageX / $(document).width()) * 100;
    var mousePosY = (e.pageY / $(document).height()) * 100;

    $('#pageBg').css({
        'background-position': mousePosX + '%' + mousePosY + '%'
    });
});

Example fiddle

Answer 2

只需将$('#pageBg').mousemove更改为$(document.body).mousemove。

工作样本：http://jsfiddle.net/jxthp/34/

移动背景图像与光标不工作

2 个答案: