4

初心者を助けてください。

ウィンドウの高さに比例して複数の絶対位置のdivを再スケーリングおよび再配置するjQuery関数を作成しようとしています。

私が達成しようとしている結果の種類を説明するために、次のコードを含めました。数値960は、ページ上のすべてのdivが持つ最大の高さをピクセル単位で表します。したがって、サイズを変更すると、960はウィンドウの高さの100％に等しくなります。

変数：divHeight、divLeft、divTopの場合、cssから値を取得し、関数がdivの高さを計算しないようにウィンドウのサイズが変更されたときにこれらの元の値を復元する方法がわからないため、手動で値を入力しました新しい値に基づいて位置付けます。

function scaleDivs() {
    var winHeight = $(window).height();
    var divHeight = 348;
    var divLeft = 40;
    var divTop = 100;
    var percentDif = (winHeight / 960) * 100;
    var newHeight = (percentDif / 100) * divHeight;
    newHeight = parseInt(newHeight) + "px";
    var newLeft = (percentDif / 100) * divLeft;
    newLeft = parseInt(newLeft) + "px";
    var newTop = (percentDif / 100) * divTop;
    newTop = parseInt(newTop) + "px";
    $("#panel_0").css({"height": newHeight, "left": newLeft, "top": newTop});
}

$(document).ready(function() {
    scaleDivs();
    $(window).bind('resize', scaleDivs);
});

私が欲しいのは、複数のdivを制御する1つの関数です-必要なcss値を自動的に取得します。

私が求めていることを実行するプラグインを誰かが知っている場合、または私が求めていることを可能にするためにコードで何を変更する必要があるかを指摘していただければ幸いです。

... 編集 ...

このソリューションは、.dataを使用して、divの高さと位置の初期値を取得します。

jQuery

function scalePanels() {
    var winHeight = $(window).height();
    var ratio960 = winHeight / 960;
    $(".panelCont").each(function(){
        var panelHeight = $(this).data("initial-height");
        var newHeight = panelHeight * ratio960;
        newHeight = parseInt(newHeight) + "px";
        var panelTop = $(this).data("initial-top");
        var newTop = panelTop * ratio960;
        newTop = parseInt(newTop) + "px";
        var panelLeft = $(this).data("initial-left");
        var newLeft = panelLeft * ratio960;
        newLeft = parseInt(newLeft) + "px";
        $(this).css({"height": newHeight, "top": newTop, "left": newLeft});
    });

};

$(document).ready(function() {
  scalePanels();
  $(window).bind('resize', scalePanels);
});

html

<div class="group_1">
  <div class="panelCont" id="pnl_0a"
    data-initial-height= "960"
    data-initial-left= "0"
    data-initial-top= "0">
    <img src="images/pnl_0a.jpg" />
  </div>
  <div class="panelCont" id="pnl_0_title"
    data-initial-height= "97"
    data-initial-left= "186"
    data-initial-top= "26">
    <img src="images/pnl_0_title.svg" />
  </div>
  <div class="panelCont" id="pnl_0b"
    data-initial-height= "960"
    data-initial-left= "0"
    data-initial-top= "0">
    <img src="images/pnl_0b.jpg" />
  </div>  
</div>

css

body {
    margin: 0 auto;
    background-color: #000;
    overflow-y: hidden;
}
#pnl_0a {
    margin: 0px;
    width: auto;
    position: absolute;
    z-index: 2;
}
#pnl_0_title {
    margin: 0px;
    width: auto;
    position: absolute;
    z-index: 4;
}
#pnl_0b {
    margin: 0px;
    width: auto;
    position: absolute;
    z-index: 3;
}
img {
    margin: 0px;
    width: auto;
    height: 100%;
}
object {
    margin: 0px;
    height: 100%;
}
4

1 に答える 1

1

考えられる解決策の 1 つは、px の代わりにパーセンテージを使用して位置と高さの両方を設定することです。この方法では、CSS のみを使用し、JavaScript はまったく使用しません。

#panel_0 {
    height: 36%;
    left: 7%;
    top: 11%;
}

位置にパーセンテージのみを使用していない場合、このソリューションは問題になる可能性があります (柔軟な配置に関するこの記事も参照してください) 。

とにかくJavaScriptが必要な場合は、次のようなことを試すことができます（ただし、テストされていないため、注意してください）：

function adjust(wrapper){
    var wrapperHeight = $(wrapper).height();  
    var wrapperWidth = $(wrapper).width();
    var elementArr = [];

    // create location index for all the elements inside the wrapper 
    $.each($(wrapper).children('.adjustable'),function(key,value){
        var percLeft = $(value).css('left')/wrapperWidth;
        var percTop = $(value).css('top')/wrapperHeight; 
        var percHeight = $(value).height()/wrapperHeight;

        var elem = [value,percLeft,percTop,percHeight];
        elementArr.push(elem);
    });

    $(document).resize(function(){          
        $.each(elementArr, function(key,value){
            $(value[0])
                .css('left', $(value[0]).css('left') * value[1])
                .css('top',$(value[0]).css('top') * value[2])
                .height($(value[0]).height() * value[3]);           
        });
    }); 
};
于 2012-06-07T09:27:13.380 に答える