3

カーソルと一緒に動く Web ページの背景を作成しました。ここでアクションを見ることができます：http://jsfiddle.net/juhant/jxthp/32/

しかし、Web ページにコンテンツを追加するとすぐに、移動が適切に機能しなくなります。カーソルがテキスト、画像、またはその他のコンテンツの上に置かれると、背景画像の動きが止まります。どうすれば適切に動作させることができますか?

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 タグに移動して修正しようとしましたが、正常に機能しましたが、画像の高さを制御できません。後でその下に他のコンテンツを追加したいので、無期限に拡張したくありません。

前もって感謝します。

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 に答える