3

フルスクリーンの背景は中央に配置されます

background: url(image) no-repeat center center;

ここで、ユーザーがマウスを動かすたびに背景画像がわずかに移動するようにします。これを行うためのいくつかの方法/プラグインに出くわしましたが、思ったほどではなかったので、次のようにすることにしました（これもどこかで見つけました）：

$("body").bind('mousemove', function(e){
    var ypos=(e.pageY-100)/12 + 10;
    var xpos=(e.pageX-100)/18 + 10;
    $(this).css({backgroundPosition: xpos * (-1) + 'px ' + ypos * (-1) + 'px' });
});

さまざまな値 (/12、+10) は、探していた結果が得られたため、任意に選択した値にすぎません。それが正しい方法かどうかはわかりません。とにかく、今の問題は、ページが最初から (マウスを動かさずに) 読み込まれると、すべてがうまく見える (画像が中央にある) ことです。

上記のスクリプトを有効にしてマウスを動かすと、背景画像が (位置の値に従って) どこかに「ジャンプ」するため、画像の左上から表示されるべきではありません。

残念ながら、私は自分でコーディングすることはできず (いくつかの基本的なものを編集するだけです)、常に数学が苦手でした。これは明らかに「単なる」数学の問題ですが、何を変更する必要があるかを理解するのを手伝ってくれる人がいるので、背景画像は基本的に常に中央に配置されますが、すべての方向にわずか 50px (または何でも) しか移動しませんか?

基本的にはhttp://manos.malihu.gr/tuts/jquery_image_panning_liquid.htmlのようなものですが、実際の画像ではなく css/background のみです。

4

2 に答える 2

2

読みやすさを維持するために、回答セクションにすばやく作成したコードを投稿します。これにより、問題が間接的に解決さ れる場合があります。

    $(function(){
        var mousex = mousey = null;
        $('body').mousemove(function(ev){
           if(mousex === null || mousey === null){
              //get initial x/y position for mouse cursor
              mousex = ev.pageX;
              mousey = ev.pageY;
           }

           window.clearTimeout(window.mouse_timeout);

           window.mouse_timeout = window.setTimeout(function(){
              console.log('mouse moved', ev.pageX - mousex, ev.pageY - mousey);

              /* now that you've the absolute position of the mouse and delta x/y here, you can move your background accordingly */

              //update the variables to the latest picket position of the mouse
              mousex = ev.pageX;
              mousey = ev.pageY;
           }, 10)
        });
     });

アップデート

jsfiddleこのコードは、最初のマウス位置を中心基準点としてマークし、後でその点を基準にしてマウスの動きを計算します。

マークアップ

<div id="outer_container">
    <div id="imagePan">
        <div class="container">
            <div id="mov">
                <img src="http://i.imgur.com/92Z5zCM.jpg" class="panning" />
            </div>
        </div>
    </div>
</div>

CSS

html, body{ height: 100%; }
body{ margin: 0; padding: 0; background: #eee; }
#outer_container{ position: relative; margin: auto; padding: 4px; border: 8px solid #dadada; height: 90%; width: 80%; background: #CDD7E0}
#imagePan{ position: relative; overflow: hidden; cursor: crosshair; height: 100%; width: 100%; }
#imagePan .container{ position: relative; left: 0; }
#mov{ margin: -51px -391px 0 }

Javascript

     var originX = originY = xUnit = yUnit = dX = dY = mov = null;
     $(window).load(function () {
        mov = $('#mov');
        initMarginL = parseInt(mov.css('margin-left'));
        initMarginT = parseInt(mov.css('margin-top'));

        $('#outer_container').mousemove(function (ev) {
           if (originX === null || originY === null) {
              originX = ev.pageX;
              originY = ev.pageY;

              xUnit = parseFloat((Math.max(originX, $(window).width()) / $(window).width()).toFixed(2));
              yUnit = parseFloat((Math.max(originY, $(window).height()) / $(window).height()).toFixed(2));
           }

           var dX = originX - ev.pageX;
           var dY = originY - ev.pageY;

           mov.css({
              marginLeft: initMarginL + (dX * xUnit),
              marginTop: initMarginT + (dY * yUnit)
           });
        });
     });
于 2013-04-16T22:12:18.960 に答える
1

「センターセンター」は明らかに「50% 50%」と同じなので、答えがわかったと思います！:)

$('body').mousemove(function(e){
  var mousePosX = 50 + (e.pageX/$(window).width())*10;
  var mousePosY = 50 + (e.pageY/$(window).height())*5;
  $(this).css('backgroundPosition', mousePosX + '% ' +  mousePosY + '%');
});

解像度が小さい (1920 よりも低い) と動きが速すぎますが、それを除けば機能します。

于 2013-04-17T09:07:23.323 に答える