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 扩展时，它应该从中心扩展到其他应该保持在其位置的其他人。就我阅读工作示例而言，我认为这涉及在 css 中使用 z-index 和位置，但我真的不明白如何使其工作。任何帮助将不胜感激。

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 回答