logo标签列表

光标移动时背景图片没有跟随移动

jqueryhtmlcss
3
我已经创建了一个网页背景，它可以随着光标移动而移动。你可以在这里看到它的效果：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标签中以解决问题，这样可以正常工作，但是我无法控制图片的高度。我不希望它无限扩展，因为后面我想添加其他内容。
谢谢您提前的帮助。
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 + '%'
    });
});

示例代码

（此链接为示例代码）
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接