3

800x600px のブラウザー ウィンドウでパンするために、約 1920x1200px の画像を取得しようとしています。したがって、マウスがブラウザ ウィンドウの左上にある場合、画像は整列されるため、左上の余白がブラウザ ウィンドウの左上になります。右下も同様です。

したがって、マウスが画面の中央にある場合、画像も中央に配置する必要があります。

私の数学は少しさびているので、どのような計算が必要かわかりません。

現在、CSS の上部/左のプロパティを使用して画像を移動するだけの JavaScript を少し使用していますが、画像を上部/左隅から移動するだけなので、あまり成功していません。

また、css で画像の位置を絶対位置に設定しました。

function updateImgPosition( e )
{
    var avatar = document.getElementById("avatar");
    // Width
    var windowWidth = window.innerWidth;
    var mouseWidthLocation = e.x;
    var percentOfWidth = (100 / windowWidth) * mouseWidthLocation;

    // Height
    var windowHeight = window.innerHeight;
    var mouseHeightLocation = e.y;
    var percentOfHeight = (100 / windowHeight) * mouseHeightLocation;


 avatar.style.top   = percentOfHeight + "%";
 avatar.style.left  = percentOfWidth + "%";


}

document.onmousemove = updateImgPosition;

これは私が持っているもののデモです: http://jsfiddle.net/uQAmQ/1/

4

1 に答える 1

4

フィドル: http://jsfiddle.net/uQAmQ/2/

ウィンドウの幅と高さは画像に応じて変化し続けるため、絶対配置された要素を「パン」しないでください。よりスムーズなソリューションには、背景画像の使用が含まれます。使用されたロジックについては、私の回答の真ん中を参照してください。

この JavaScript を検討してください (コメントを読んでください。フィドルで HTML + CSS を使用してください)。

(function(){ //Anonymous function wrapper for private variables
    /* Static variables: Get the true width and height of the image*/
    var avatar = document.getElementById("avatar");
    var avatarWidth = avatar.width;
    var avatarHeight = avatar.height;
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;

    /* Logic: Move */
    var ratioY = (avatarHeight - windowHeight) / windowHeight;
    var ratioX = (avatarWidth - windowWidth) / windowWidth;

    function updateImgPosition( e ) {

        var mouseY = e.pageX; //e.pageX, NOT e.x
        var mouseX = e.pageY;        
        var imgTop = ratioY*(-mouseY);
        var imgLeft = ratioX*(-mouseX);
        document.body.style.backgroundPosition = imgLeft + "px " + imgTop + "px";

    }

    /* Add event to WINDOW, NOT "document"! */
    window.onmousemove = updateImgPosition;    
})();

その背後にあるロジック:

  • 画像サイズは絶対単位で指定されるため、相対単位は使用できません。
  • オフセットは、次のような特定の比率に従って変更する必要がありimage size ます window size。
    ただし、この比率は完全ではありません。画像はウィンドウの左下隅に表示されなくなります。これを修正するには、画像のサイズからウィンドウのサイズを引きます。結果は、コードの variableratioXおよび にありratioYます。
    window.onload画像のサイズは動的に計算されるため、 以前のコードはイベントでロードする必要がありました。このため、本文には HTML 要素も含まれていました。

コードで背景のサイズを指定することにより、同じコードをはるかに小さく効率的に記述できます。この改善されたコードを参照してください。フィドル: http://jsfiddle.net/uQAmQ/3/

(function(){ //Anonymous function wrapper for private variables
/* Static variables: Get the true width and height of the image*/
    var avatarWidth = 1690;
    var avatarHeight = 1069;
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;

/* Logic: Move */
    var ratioY = (avatarHeight - windowHeight) / windowHeight;
    var ratioX = (avatarWidth - windowWidth) / windowWidth;

function updateImgPosition( e ) {
    var mouseX = e.pageX; //e.pageX, NOT e.x
    var mouseY = e.pageY;        
    var imgTop = ratioY*(-mouseY);
    var imgLeft = ratioX*(-mouseX);
    document.body.style.backgroundPosition = imgLeft + "px " + imgTop + "px";

}
/* Add event to WINDOW, NOT "document"! */
window.onmousemove = updateImgPosition;
})();

コードの可読性の低下を気にしない場合は、次のコードが最適なソリューションです。Fiddle: http://jsfiddle.net/uQAmQ/4/ :

(function(){ //Anonymous function wrapper for private variables
/* Static variables: Get the true width and height of the image*/
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    var ratioY = (windowHeight - 1069) / windowHeight;
    var ratioX = (windowWidth - 1690) / windowWidth;

    window.onmousemove = function( e ) {
        document.body.style.backgroundPosition = ratioX * e.pageX + "px " + ratioY * e.pageY + "px";
    }
})();
于 2011-10-15T10:08:20.230 に答える