2

divのグリッドがあり、それぞれにコンテンツが含まれています。テキスト、画像、およびある種の[x]ボタンです。これらのdivはすべて絶対位置に設定されています（これは不規則なグリッドであるため、絶対位置を選択しました）。

私が今やりたいのは、マウスカーソルがそれらの上にあるときにそれらを展開させることです（そしてそれをグリッドから他の重なり合うdivの上に置きます）。私はここでこれを行うことができました：http：//jsfiddle.net/CvhkM/2833/。問題は、初期の位置と寸法に戻したいことです（各divには独自の位置と寸法があります）が、何らかの理由で機能しません...（jQueryではこれが初めてであることに注意してください）。ああ、そして私が付け加えるかもしれませんが、領域（長方形の領域）の外側に拡張しないように制限するにはどうすればよいですか？

4

2 に答える 2

4

上記のオーバーフローの問題は間違いなく役立ちます。CSSでそれを行うことができます。私は個人的にoverflow：hiddenまたはoverflow：autoを実行して、ボックスにカーソルを合わせるまでオーバーフローしたコンテンツが非表示のままになるようにします。

コードを動的にするために以下のコードを追加しました。ホバーアニメーションの数値を自由に調整できます。倍率は、次のようにサイズを調整するのに少し役立ちます。元の寸法:)

var multiplying_factor = 1.5;
$(function() {
    $('.div').each(function() {
        $(this).data('original_position', $(this).offset());
        $(this).data('original_width', $(this).width());
        $(this).data('original_height', $(this).height());

        $(this).hover(function() {
            $(this).stop().animate({
                left   : $(this).data('original_position').left - ($(this).data('original_width') * multiplying_factor / 4),
                top    : $(this).data('original_position').top - ($(this).data('original_height') * multiplying_factor / 4),
                width  : $(this).data('original_width') * multiplying_factor,
                height : $(this).data('original_height') * multiplying_factor
            }, 300);
        },function() {
            $(this).stop().animate({
                left   : $(this).data('original_position').left,
                top    : $(this).data('original_position').top,
                width  : $(this).data('original_width'),
                height : $(this).data('original_height')
            }, 300);
        });
    });

});    ​
于 2012-05-04T13:31:56.387 に答える
0

そのオーバーフローの問題。追加してみてください

$('.div').css('overflow','visible');

このJSFiddleを参照してください。

http://jsfiddle.net/CvhkM/2834/

于 2012-05-04T13:21:06.393 に答える