9

私は巨大な横スクロールのウェブサイトを持っています。例として、Mario Worldを考えてみてください。すべての「資産」は絶対的に配置されます。

アイテムのサイズ (高さと幅) をブラウザーのビューポートに対して相対的に (パーセンテージを使用して) したいのですが、左から実際のピクセルを使用してアイテムを配置する必要があります。

これを行うと、明らかに、ブラウザー ウィンドウのサイズを変更すると、アセットも正しくサイズ変更されます。ただし、アイテムの位置はピクセル単位であるため、背景に対して物がずれます。

この問題に対する簡単な CSS ソリューションはありますか? パーセンテージを使用して位置を定義する (左: 50% など) ことは、あまり正確ではないため、実際には良い解決策ではありません (以下の jsfiddle を参照)。または、JS を使用してサイズ変更イベントを見て、そのようにする必要がありますか? もしそうなら、どのように？

私は今、意味を成しているかどうかわからない..質問がある場合はお知らせください。

編集

ここに JSFiddle があります: http://jsfiddle.net/BZ77t/

#blockpxウィンドウのサイズを変更すると、黒いブロック ( ) はピクセルを使用して配置されるため、サイズ変更中に影響を受けないことに注意してください。ただし、赤いブロック ( #blockpercentage) は、パーセンテージを使用してサイズと位置を調整することで、目的の位置 (背景イメージの位置) に固定するという、目的の効果を実現しています。ただし、実際には正確ではありません。この例ではそれほど重要ではありませんが、設定が大きい (幅が広い) と、差がかなり大きくなります。

4

2 に答える 2

3

解決策は、包含要素と JavaScript の組み合わせを使用することです: http://jsfiddle.net/KaaXg/3/

このフィドルには、次の JavaScript 機能が含まれています。

$(document).ready(function(){
    $(".container").css("width", $(".image").width());        
    $(window).resize(function(){
        $(".container").css("width", $(".image").width());        
    });
});

ここで注意すべき最も重要なことは、leftと のwidth値がbody要素に関して計算されていたことです。これは意図したものではありませんでした。

これに対抗するためdivに、ページ上の赤いブロック グラフィックに使用されるイメージとその他のタグを含む包含要素を追加しました。

ただし、javascript を使用しないleft場合、ウィンドウのサイズが変更された後にページが再ロードされたときに属性が「更新」されるだけです。ブロック レベルの要素は、単独では水平方向に更新されません。

leftとを背景画像に比例させたいのですが、widthCSS のみを使用してページのサイズを変更したり移動したりしても、 と は更新されません。上記の JavaScript ソリューションは、ページのサイズが変更されると、含まれる要素の幅を動的に更新し、この問題を解決します。

bottomおよびheightcss スタイルは、Web サイトの目的に合わせて機能するため、そのままにしておきます。コンテナーは、その中の画像に合わせて高さが大きくなります。

ページ上の固定ピクセルの黒いブロックで何をしたいのか正確にはわからないので、そのまま残しました。

編集: 私はこのプロジェクトを真剣に見直し、オブジェクト ファクトリを作成して新しいグラフィックを作成し、ページのコードを更新しました。このソリューションは、HTML や CSS をほとんど必要とせず、JavaScript コードが少し多くなりますが、ページに動的グラフィックスを実装したり、新しい要素を機能的に追加したりするのがはるかに簡単になります。http://jsfiddle.net/RnCWN/9/

ここで思いついた JavaScript ソリューションは、リアルタイム更新パーセンテージを使用して、パーセンテージ ベースのブロックのwidthおよび属性を設定し、静的および属性を初期化します。leftheightbottom

このリビジョンでは、メソッドを使用PercentageBasedGraphicしてページ上にフローティング ボックスを作成できます。次に例を示します。

PercentageBasedGraphic(25, 10, 4, 30, "block1");

この関数は、対応する、、、および値 (すべてパーセンテージ)divを持つid = "block1"属性を持つを追加します。また、作成した のサイズ変更と位置変更に必要なすべての情報を含むオブジェクトも返します。それぞれに異なるクラスを追加することで、この機能を簡単に拡張できます。とにかく、返されたオブジェクトを最終的にどのように利用するのでしょうか?widthheightleftbottomdivdiv

addGraphic(graphicArr, PercentageBasedGraphic(25, 10, 4, 30, "block1"));

このaddGraphic関数は、新しい各フローティング ボックスを配列に追加します。後で、ウィンドウのサイズ変更時にこの配列を反復処理して、定義したすべてのフローティング ボックスの位置を変更します。

正直に言うと、スーパーマリオのグラフィックのおかげで、この作業はとても楽しくなりました。

于 2013-02-26T16:41:22.690 に答える
0

古い（サイズ変更前）と新しい（サイズ変更後）ウィンドウの幅と高さの違いを確認し、この違いを使用して下と左の位置を変更できます。

$(document).ready(function(){
    var width = $(window).width();
    var height = $(window).height();
    var blockLeft = parseInt($('#blockpx').css('left'));
    var blockBottom = parseInt($('#blockpx').css('bottom'));
    $(window).resize(function(){
        var difWidth = width - $(this).width();
        var difHeight = height - $(this).height();
        if (difHeight>0) {
            $('#blockpx').css('bottom',blockBottom-difHeight + 'px');
        } else {
            $('#blockpx').css('bottom',blockBottom+difHeight + 'px');
        }
        if (difWidth>0) {
            $('#blockpx').css('left',blockLeft-difWidth + 'px');
        } else {
            $('#blockpx').css('left',blockLeft+difWidth + 'px');
        }
    });
});

jsfiddleを試してください。

これは jquery バリアントです。プレーンな JavaScript を使用して同じことができます。

于 2013-02-21T13:23:37.837 に答える