1

我正在制作类似于 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;}
4

2 回答 2

1

编辑好的，我的第一个答案在这里没有用 - 在砌体/同位素的相对定位容器中包含绝对定位元素的情况下，绝对定位将不起作用；解决方案是在单击时将 masonry/Isotope 元素的内容从 DOM 中取出，并将其临时附加到正文中。你可以在我肮脏的瑞典沙箱中看到基本的想法

<!-- 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;
}
于 2012-08-02T08:17:23.107 回答
0

您可以在 css 中为元素添加 :hover 并更改 z-index。您也可以通过单击类轻松更改此设置...

.item {
    z-index:1
}

.item:hover{
    z-index:2500;
}
于 2014-11-26T01:56:23.223 回答