2

ページの背景画像にパン効果を追加しようとしています。画像は 1800 x 1067 と非常に大きいため、基本的にはウィンドウよりも大きくなります。マウスがウィンドウの端に達したときに背景を全方向にパンしたいのみ、パンを行うJavascriptコードを見つけましたが、水平方向のみで、垂直方向のパンを有効にするためにそれをいじってみました。動作しませんでした。

JSFiddle のコードは次のとおりです: http://jsfiddle.net/v662t/

// HTML

<div id="pageBg">
</div>

//CSS

#pageBg {
    background: url(images/pageBg.jpg) no-repeat 0 0 scroll;
    background-size: cover;
    height: auto;
    left: 0;
    min-height: 768px;
    min-width: 1024px;
    overflow: hidden;
    position: fixed;   
    top: 0;
    width: 100%;
}

// Javascript

$(document).ready(function(){
   $('#pageBg').mousemove(function(e){
      var mousePosX = (e.pageX/$(window).width())*100;
      $('#pageBg').css('background-position-x', mousePosX +'%');
   }); 
});
4

2 に答える 2

1

より良い書式設定を含めるために、ここの端でパンすることについてのコメントに答えています。

エッジでのパンをどの程度正確に機能させたいかによって異なります。マウスがエッジ上を移動している場合のみ、またはマウスが静止していてもエッジ上でホバリングしている場合にのみ画像が移動しますか?

最初のケースでは、同じフィドル コードを使用して、 < 10 または > 90 (またはエッジとして定義するパーセンテージ) であるかどうmousePosXかを確認するだけです。mousePosYその場合、イメージをウィンドウのパーセンテージに移動する代わりに、エッジのパーセンテージに移動します。

それは少し敏感になりすぎるかもしれないので、代わりにホバーで移動する代わりmouseEnterに行くことができますmouseLeave。、次にその間隔をクリアします（）。mouseEntervar interval = setInterval(moveImage,250);clearInterval(interval);mouseLeave

フィドルを自分で編集して、希望どおりに機能するかどうかを確認するのはあなたに任せます。

于 2013-01-24T14:35:27.803 に答える
1

background-size: covermousePosY のいくつかの JavaScript 行を削除して追加します。

var mousePosY = (e.pageY/$(window).height())*100;
$('#pageBg').css('background-position-y', mousePosY +'%');

ここで動作するフィドルをチェックしてください：http://jsfiddle.net/georgedyer/XWnUA/2/

于 2013-01-23T20:58:10.993 に答える