5

私は実際にテーブル内に製品リストを作成しようとしています。私はすでにdbからデータを取得してページに配置するphpコードを持っていますが、jqueryとjavascriptで立ち往生しています、私はその中でそのような初心者です。私はいくつかのドキュメントを読んでいて、このスクリプトを使って出かけました：

javascript

$(window).load(function(){
$('.principale').hover(function() {
    $(this).animate({
        width: 215, height: 350, margin: 0,
    }, 'fast');
/*  $(this).animate().css('box-shadow', '0 0 10px #44f')*/
    $(this).animate().css('box-shadow', '0 0 5px #000')

    }, function() {
        $(this).animate().css('box-shadow', 'none')
        $(this).animate({
            width: 210, height: 240, margin: 0,
        }, 'fast');
    });
});

css

.tabellainizio {
    margin-top:100px;
}
.bordini {
    border: 1px #DDD solid;
}
.principale {
    height: 240px;
    width: 210px;
    overflow: hidden;
}
.principale .contenitore {
    height: 240px;
    width: 210px;
    float: left;
    display: block;
}
.immagine {
    border: 1px solid maroon;
    text-align: center;
    margin: 15px;
    height: 168px;
    width: 168px;
    position:relative;
}
.content {
    display: none;
margin: 15px;
}
.contenitore:hover {
    width: 215px;
    height: 350px;
    margin: 0px;
    border: 1px solid black;
}
.contenitore:hover .content {
    display: block;
}
.contenitore:hover .immagine {
    position:relative;
}

ここでデモを見ることができます：http： //jsfiddle.net/fozzo/EWJGJ/

しかし、これは本当に私が必要としているものではありません。divが拡張すると、中央から他のdivの上に拡張し、代わりにその位置に留まる必要があります。私が実際の例を読んでいる限り、これはcssでz-indexとpositionを使用することを含むと思いますが、それを機能させる方法を本当に理解していません。どんな助けでもありがたいです。

4

3 に答える 3

5

OPの質問の明確化に基づいて回答が作り直されました

.contenitore絶対に配置し、親コンテナの左上隅から配置する必要があり.principaleます。親は相対的な位置にある必要があり、コンテンツの子は絶対的な位置にある必要があります。

.principale {
    height: 240px;
    width: 210px;
    position: relative;
}
.principale .contenitore {
    background-color: #fff;
    height: 240px;
    width: 210px;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
}

text-align: centerまた、画像要素を中央に配置するために使用することはできません。代わりに：を使用してmargin: 15px autoください

.immagine {
    border: 1px solid maroon;
    margin: 15px auto;
    height: 168px;
    width: 168px;
    position:relative;
}

ホバーイベント時に、コンテンツのサイズを変更し、上下の位置をアニメーション化します。

$(window).load(function(){
$('.contenitore').hover(function() {
    $(this).animate({
        width: 300,
        height: 400,
        top: -80,  // Half the height difference 0.5*(400-240)
        left: -45  // Half the width difference 0.5*(300-210)
    }, 'fast');
    $(this).animate().css('box-shadow', '0 0 5px #000');
    $(this).css({
        zIndex: 100  // Change z-index so that is the positioned above other neighbouring cells
    });
}, function() {
    $(this).animate().css('box-shadow', 'none')
    $(this).animate({
        width: 210,
        height: 240,
        top: 0,
        left: 0
    }, 'fast');
    $(this).css({
        zIndex: 1
    });
});
});

ここでフィドルを参照してください-http ://jsfiddle.net/teddyrised/EWJGJ/6/

于 2013-03-15T15:18:52.600 に答える
4

アプローチを少し考え直せば、実際にはjsなしでこれを行うことができます... HTMLマークアップは少し異なりますが、cssだけで実行するとパフォーマンスが大幅に向上します。

http://jsfiddle.net/adamco/GeCXe/

ul,li{
list-style:none;padding:0;margin:0;
}
ul{
    width:400px;
}
li, .item {
    width:100px;
    height:100px;   
}
li {
    float:left;
    margin:5px;
    position:relative;
}
.item {
    background-color: #eee;
    border:1px solid #ccc;
    position:absolute;
    z-index:1;
    -webkit-transition:all 0.1s ease-in-out;
}
.item:hover {
    width:110px;
    height:200px;
    z-index:2;
    -webkit-transform:translate(-5px,-5px);
    -webkit-box-shadow: 1px 1px 1px #888;
}
于 2013-03-15T15:46:45.990 に答える
1

商品リストのレイアウトを設定するためにテーブルを使用しないことをお勧めします。幅/高さが設​​定されたdivを使用する方が、アプリケーションにはるかに適しています。相対位置に設定されたボックス内で絶対位置を使用すると、実行しようとしていることを非常に簡単に実現できます。

CSS：

   .outside {
        float: left;
        width: 150px;
        height: 150px;
        position: relative;
        padding: 10px;
    }

    .inside {
        position: absolute;
        border: 1px solid #000;
        width: 150px;
        height: 150px;
        background: #eee;
        z-index: 900;
    }

jQuery：

$('.inside').hover(

function () {
    $(this).animate({
        height: '200px',
        width: '200px'
    }, 200);
},

function () {
    $(this).animate({
        height: '150px',
        width: '150px'
    }, 200);
});

完全な例は次のとおりです：http：//jsfiddle.net/wms6x/

于 2013-03-15T15:47:16.737 に答える