0

我对网站布局有一个很好的想法，但还在尝试如何做到这一点..

好吧，我们就这么说吧：你有一堆纸，但它们并没有完美地叠放在一起，但是每张纸都有 20% 的可见度，只有最上面的那张是 100% 可见的。如果你想在中间放一张纸，你把它拉出来放在上面，盖住上面的纸。

我想在网站上这样做。5 互相覆盖，除了最上面的那个，谁躺在上面。假设您要将中间的拉到顶部，将旧的覆盖在顶部，最好的方法是什么？

我在考虑一个 .click 事件，它将当前顶部的 Z-index 更改为比需要顶部的值更低的值。让我们说，他们交换。

也许很难问，但你会建议自己作为一个解决方案吗？

谢谢

4

2 回答 2

1

有很多方法可以解决这个问题。我脑海中浮现的那些是这样的：

变量顶部 = 40; // z-index 值 var topPageTop = 20; // 顶部页面顶部偏移量 var topPageLeft = 40; // 顶部页面左偏移

$('.page').click(function(){
    $(this).css('z-index', top);
    $(this).css('top', topPageTop);
    $(this).css('left', topPageLeft);
    shufflePages(yourDOMContainer)
});

function shufflePages(yourDOMContainer){

    for(pageElement in yourDOMContainer){
         iterate top and left back by a set value for each page, skip the top page
         maybe even inclue an animation function?
    }
}

因此，在我的实现中，每个页面都是某个父容器的子元素，它可以是 ul/li 事物或多个 div。有几种方法可以解决这个问题。

显然，shuffle pages 函数是伪代码，但您正在寻找一个起点——而不是最终产品。让我知道这是否有帮助或以任何方式不清楚。

于 2013-04-19T18:49:02.443 回答
1

听起来你们在同一条轨道上。我可能会按如下方式处理这个问题：

我不一定会“交换”他们的 z 索引。我要做的是找到“纸叠” div 的最高 z-index，然后简单地为刚刚点击的纸张分配一个高于我们刚刚检测到的最高 z-index 的值。说得通？

还要记住，z-index 属性只有在 DOM 元素具有“位置”时才会生效。换句话说，确保将 div 设置为 position: relative 或 position: absolute。

像这样：

// assign this click function to all divs in the paper stack
$(".paper-stack-divs").click(function() {

    var index_highest = 0;  // initialize the highest index value to 0 

    // loop through all of the paper stack divs

    $(".paper-stack-divs").each(function() {

        // get the z-index value for current paper stack div
        var index_current = parseInt($(this).css("z-index"));

        // check the z-index of the current paper stack div against what we
        // currently know to be the highest z-index.
        // if the current z-index is higher than the last known highest z-index, then
        // set the current z-index as our new highest 

        if(index_current > index_highest) 
             index_highest = index_current;  
    });

    // once the loop is finished and we have the highest z-index, give the paper stack
    // div that was just clicked a z-index of our highest z-index, plus 1, which would        
    // make our clicked div now have the highest z-index value and will go to the top of 
    // the stack

    $(this).css("z-index", parseInt(index_highest+1));


 });
于 2013-04-19T18:51:47.383 回答