0

こんにちは私は現在、非常にシンプルなサイトを持っています。フルフレームの背景画像とコンテナdivで構成されています...背景画像は動的に中央に配置され、次のようなcssルールで配置されます。

html {
    background: url(../images/hotel_room.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

これは私にとってはうまく機能しているようで、背景画像を一種の「レスポンシブ」な方法で配置し続けます。これはまさに私が目指していたものです。

また、全幅で次のように配置されたコンテナdivもあります。

#mega_wrap{
    position: absolute;
    top:0;
    left: 0;
    height: 100%;
    width:100%;
}

次に、クリックされた瞬間のマウスの位置に基づいてonClickを使用して#mega_wrapコンテナにdivを追加する簡単なjQueryがあります...次のようになります。

$(document).ready(function() {

    //onClick append a resizable & draggable div with handles on all 4 corners
    $('#mega_wrap').click(function(e){

        //Define element css and positioning then add both draggable and resizable from jQuery UI
        var ele = $("<div>");
            ele.css({width:"100px", height:"100px", border:"3px dashed white", position:"absolute", left: e.pageX - 50, top: e.pageY -50});
            ele.draggable();
            ele.resizable({
                handles: 'all'
            }); 

        //Define elements handles and append them to the new div
        var eleHandleNE = $("<div class='ui-resizable-handle ui-resizable-ne' id='negrip'>");
        var eleHandleSE = $("<div class='ui-resizable-handle ui-resizable-se' id='segrip'>");
        var eleHandleSW = $("<div class='ui-resizable-handle ui-resizable-sw' id='swgrip'>");
        var eleHandleNW = $("<div class='ui-resizable-handle ui-resizable-nw' id='nwgrip'>");

            eleHandleNE.appendTo(ele);
            eleHandleSE.appendTo(ele);
            eleHandleSW.appendTo(ele);
            eleHandleNW.appendTo(ele);

        //Append new div to the container div called mega_wrap
        $("#mega_wrap").append(ele);

   }); 
});

注：すべてのdivは、すべてのコーナーでサイズ変更可能であり、jQueryを使用してドラッグ可能です...したがって、divは、コンテナー#mega_wrap ......内の任意のサイズおよび任意の場所にある可能性があります。これが、私の問題の始まりです。

divごとにある種の変数を使用して、追加されたすべてのDIVSの位置を追跡する方法を探していますか？！javascriptまたはjqueryのいずれかを使用していますか？次に、divのサイズが変更されたり、コンテナー内でドラッグされたりした場合に、その変数を更新できるようにする必要があります。

そして最後に...ウィンドウのサイズが変更されたら、divを背景画像上の正確な古い位置にサイズ変更する必要があります...したがって、各divは、ウィンドウサイズに応じてロックされた比率で適切に（上または下に）拡大縮小されますか？！ ？

注：提供されているソリューションに応じて、背景画像を異なる方法で実行する必要があると思いますか？提案を受け入れる....多分.cssから.jsまたはphpに変更されましたか？

ヘルプは大いに感謝されます....TIY

4

1 に答える 1

0

通常、各 div に属性を追加します。

var eleHandleNE = '<div class="ww xx yy" id="zz" iniWidth="100" iniHeight="200">';

後で、 $(window).resize(...) が起動したら (または使用しているものは何でも)、属性を探してスケーリングします。 

$(this).width($(this).attr('iniWidth')*ratio);
$(this).height($(this).attr('iniHeight')*ratio);

ところで、ペンダントではありませんが (特に、非標準の属性タグを追加することを提案しているため)、ID はすべて一意である必要があります。そうである場合、別のオプションは、すべての初期データを格納するオブジェクトの配列を作成することです。次に、配列と ID を使用して値を取得/設定できます。 

//initial div's attrs
divArray = new Array({id:'#id0',width:100,height:200},{id:'#id1',width:50,height:90});
...
//adding another div later
divArray[divArray.length] = {id:'#id2',width:300,height:500};

//Resize stuff...
function resizeStuff(divArray,ratio) {
  for(i=0;i<divArray.length; i++) {
    $(divArray[i].id).width((divArray[i].width*ratio);
    $(divArray[i].id).height((divArray[i].height*ratio);
  }
}
于 2012-10-10T00:20:59.443 に答える