Question

我有一堆卡片。它们是堆叠的，因此每个底部都有一厘米左右可见。我想要的是，当卡片被点击时它向右移动，然后被分类到顶部并向左移动到堆上。然后，我希望触发页面更改（到卡片所代表的页面）。

我如何通过JQuery实现这一目标？我仍处于使用这种语言的基础水平。

<style>
#cardStack{
    height: 700px;
    width: 400px;   
    overflow:visible;
}
#cardStack ul{
    display:inline;
}
#cardStack li{
    z-index:auto;
}
.top{
    margin-top:-670px;
    z-index:1;

}
.middle{
    margin-top:-670px;
    z-index:2;
}
.bottom{
    margin-top:100px;
    z-index:3;
}
</style>
</head>

<body><br /><br />
<div id="cardStack">
<ul>
    <li class="bottom"><img src="images/cardA.png" /></li>
    <li class="middle"><img src="images/card6.png" /></li>
    <li class="top"><img src="images/card8.png" /></li>
</ul>
</div>

我知道有一个动画功能，但是如何通过点击启动它？

编辑：在上面添加了更多代码

Answer 1

您可以在点击的任何图像上设置要发生的事件，如：

$('ul li img').click(function () {
    $(this).animate( ... );
    .
    .
    .
}

如果不知道用于“堆叠”卡片的CSS，我无法提供更具体的帮助。

Answer 2

用于哈希更改使用ben alman's BBQ plugin 在jsbin处尝试了您的代码但是由于缺少指向卡片的链接，因此HTML无法呈现如果你在这里放一个工作的jsbin样本 - 帮助你变得更容易

关于动画：如果你将李的布局设置为绝对位置，你可以自由移动它们，所以你可以将它们设置为左侧动画，然后设置回动画然后更改z-index以将其置于顶部

[编辑] 所以.. here is a link to a quick solution：
你在动画代码方面遇到了一些问题，+更好地改变了位置，而不是更好的

用于参考代码：

$('#cardStack img').click(function () 
{
       var img = $(this);
       img.animate({left: '+=50px'},200,function() 
          {
                img.animate({left: '-=50px'},200,function()
                     {
                       img.parent().prependTo($("ul"));
                       arrengeClasses();
                     });
          });
});

function arrengeClasses()
{
    var allListItems = $("#cardStack ul li");
    for(var i=0;i<allListItems.length;++i)
    {
      allListItems.eq(i).removeClass().addClass("pos" + i);
    }
}

并稍微更改了css：

 #cardStack li img{
    position:absolute;
     top:0px;
     left:0px;
    }
 .pos2{
    z-index:1;
    margin-top:100px;
 }
 .pos1{
    z-index:2;
    margin-top:50px;
 }
 .pos0{
   z-index:3;
 }

Answer 3

对于要触发页面更改的部分，可以使用window.location将哈希附加到末尾。因此，您的网址可能最终为example.com/cards#joker

JQuery堆栈卡

3 个答案: