1

ページ レイアウトに影響を与えずにボックス (div) を拡張する jquery を実行したいと思います。サンプルは http://themes.ddwebstudios.net/?theme=photon&type=htmlです。

画像の下 (ページ全体) の小さな透明なボックスにマウスを合わせるとわかるように、ボックスはページ サイズを変更せずにスライドアップされます。

display:hidden; で .hide() と .show() または slidedown と slideup 関数を使用する方法を知っています。ボックス形式ですが、ご存知のように、ボックスの一部を表示したいので、ここにいくつかの問題があり、ページレイアウトを変更したくありません

これが私がそれを行う方法を理解しようとしたサンプルです。それを見て、row_3の前にmagicDivボックスの一部（上部の5％）を追加し、それを完全に拡張する方法を教えてください。ページレイアウトに影響を与えずにjquery関数を使用してサイズを変更しますか?

http://jsfiddle.net/Behseini/nuC69/2/

お時間をいただきありがとうございます。

4

2 に答える 2

1

ボックスは絶対配置と z-index を使用するため、ページ サイズを変更しません。

div を開いたときに右クリックして調べるalbum-thumbsと、CSS で行われていることがわかります。

ここに画像の説明を入力

主な要素は次のとおりです。

position: absolute;
z-index: 10;

さらに、これはあなたの質問の一部ではありませんでした。display: none;ページ レイアウトに影響を与えないようにするため、またはvisibility: hidden;div がページ レイアウトに影響を与えるようにするために使用します。（display: hidden;、あなたが書いたように、有効なCSSではありません）

于 2012-05-09T15:42:03.400 に答える
0

加藤は当たりです。jQuery() の show hide() 部分の小さなスニペットを次に示します。

私は拡大ウィンドウの高さを格納するために配列を使用するのが好きなので、私のものは少し異なります。これにより、さまざまな高さのウィンドウを拡大し、jQuery コードを減らすことができます

$(document).ready(function () {
    //create a string array to store various window sizes then based upon the attribute id of the element


        //load the apporaiate array value
        var winHeight = ["220px",
                         "100px",
                         "90px",
                         "400px",
                         "150px"];

    $(function () {
        $('.div1').hide();
    });

    $('.div2').click(function () {
        var cssProp = winHeight[$(this).attr('id')];

        if ($('.div1').is(':hidden')) {
            $('.div1').show();
            $('.div1').animate({ "height": cssProp }, 'slow');
        }
        else {
            $('.div1').hide("slow");
            $('.div1').animate({ "height": "0px" }, 'slow');
        }
    });

適用された唯一のcssは

.div1
{
    margin: 5px;
    height: 0px;
    font-size: .9em;
    margin-left: auto;
    margin-right: auto;
}

値は、div 要素の属性 ID を取得することによって割り当てられます

<div id="1" class="div2" /> // would set the height to 100px

hide() を使用すると、属性 hidden が要素にアタッチされます。これは、div 要素の「視覚的な」状態を確認するためにテストする方法です。この例では、クリックイベントでこれを使用していますが、必要に応じてイベントロジックを .hover() に変更できます

元のjsFiddleファイルを変更して、実際の例を示しました

于 2012-05-09T15:59:23.080 に答える