Question

我正在制作类似于iphone布局的东西（一堆带有图片/数字的图块，您可以点击以获取更多信息）。设置好布局后，我想点击一下将其中一个图块展开为全屏。现在，它移动了瓷砖，以便重新调整布局。是否有可能让砌体停止渲染，以便一块瓷砖在其他瓷砖上放大？

以下是我尝试过的（但没有成功）。注意：它使用d3.js生成要用于砌体的div。

function drawGrid(divname,orders)
{   
var mydiv = d3.select(divname);
$(divname).masonry({
    itemSelector: '.g1',
    isAnimated: true,
    //isResizable: true
});

var myd = mydiv.selectAll("div");
var mygs = myd.data(orders,function(d){ return d.orderid;})
    .enter().append("div")  
    .attr("class","g1")
    .append("g");

var x1 = mygs.append("div")
        .attr("class","tickerdiv")
        .text(function(d){ return d.ticker; }); 


var ActiveOrder = "1";
$(divname+' .g1').click(function() {  
    //$(this).show('maximised');
    console.log("clicked")

    $(this).animate({"display":"none","position": "absolute",
        "top": "0",
        "left": "0",
        "width": "100%",
        "height": "100%",
        "z-index": 1000 }, 1000);
});
var x = [];
x.redraw = function(o)
{           
    x1.text(function(d){ return d.ticker; });
}
return x;
}

并从css文件中获取：

.g1 { min-height:80px; width: 100px; margin: 15px; float: left; background-color: RGB(223,224,224); border-radius: 10px; vertical-align: middle; text-align: center; padding-top: 20px;}

Answer 1

编辑好的，我的第一个答案在这里没用 - 绝对定位不适用于砌体/同位素相对定位的容器，其中包含绝对定位的元素;解决方案是在点击时将砌体/同位素元素的内容从DOM中取出并暂时将其附加到正文。您可以看到基本构思in my dirty swedish sandbox

<!-- masonry/Isotope item large -->

<div class="item large">
    <div class="header">
        <p>Click here</p>
    </div>
    <div class="minimised">
        <p>Preview</p>
    </div>
    <div class="maximised">
        <p>Content</p>
        <button id="screen-overlay-on">Screen overlay on</button>
        <div id="screen-overlay-background"></div>
        <div id="screen-overlay-content">
            <p>Content</p>
            <button id="screen-overlay-off">Screen overlay off</button>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){

    $('#screen-overlay-on').click(function(){

        var sob = $('#screen-overlay-background').detach();
        var soc = $('#screen-overlay-content').detach();

        sob.appendTo('body');
        soc.appendTo('body');

        $('#screen-overlay-background').toggleClass("active");
        $('#screen-overlay-content').toggleClass("active");
    });

    $('#screen-overlay-background, #screen-overlay-off').click(function(){
        $('#screen-overlay-background').toggleClass("active");
        $('#screen-overlay-content').toggleClass("active");
    });

});
</script>

使用CSS

#screen-overlay-background {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #333;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
z-index: 1000;
}

#screen-overlay-content {
display: none;
position: absolute;
top: 50%;
left: 50%;
height: 240px;
width: 320px;
margin: -120px 0 0 -160px;
background-color: #FFF;
z-index: 1000;
}

#screen-overlay-background.active, #screen-overlay-content.active {
display: block;
}

Answer 2

您可以添加：hover到css中的元素并更改z-index。您也可以通过单击同时轻松更改此内容...

.item {
    z-index:1
}

.item:hover{
    z-index:2500;
}

JQuery Masonry - 将div扩展到其他div

2 个答案: