3

I've created a web page background which is moving together with cursor. You can see it action here: http://jsfiddle.net/juhant/jxthp/32/

But as soon as I add some content to the web page, the moving is not workig properly any more. When the cursor hovers over text, images or whatever content, the background image stops moving. How can I make it work properly?

The HTML looks like this:

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

I tried to fix it by moving the pageBG id to the body tag, which made it work properly, but then I can't control the height of the image. I don't want it to expand indefinitely, since I want to add some other content below it later on.

Thank you in advance.

4

2 回答 2

2

问题是因为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 + '%'
    });
});

示例小提琴

于 2013-11-07T13:53:37.783 回答
1

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

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

于 2013-11-07T13:53:57.453 回答