JQuery堆棧卡片

我有一堆卡片。它們被堆疊起來，因此每一個在底部可看見大約一釐米。我想要的是，當一張卡片被點擊時，它會向右移動，然後被分類到頂部，然後向左移回到堆上。然後，我希望觸發頁面更改（到卡所代表的頁面）。JQuery堆棧卡片

我該如何通過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>

我知道有一個動畫功能，但我怎麼會啓動該上點擊？被點擊喜歡添加更多的代碼上面

來源

2010-10-25 Dan Hanly

旋轉不會在IE中工作。 – jantimon 2010-10-25 10:03:59

然後我可以通過Z-Index屬性來做到這一點嗎？ – 2010-10-25 10:05:01

@Ghommey OP是否提及旋轉？ – 2010-10-25 10:08:14

爲亂碼改變使用ben alman's BBQ plugin 想你的代碼在jsbin
但因爲鏈接到卡丟失的HTML不會呈現正確
如果你把這裏工作jsbin樣本 - 幫助您將玉米粥容易

關於動畫：如果佈局李的有一個絕對位置，你可以四處自由它們移動，
這樣你就可以將它們動畫到左邊，然後動畫回來然後改變z-index使其位於頂部

[編輯] 所以.. here is a link to a quick solution：
你有一些問題與動畫代碼+更好的改變位置而不是marign

的參考代碼：

$('#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; 
}

來源

2010-10-25 10:52:04

這裏是我的JSbin頁面 - http://jsbin.com/ecewa3 – 2010-10-25 11:07:41

歡呼聲幫助 – 2010-10-25 13:12:48

如果我可以再次投票給你，我將！它很棒，歡呼聲 – 2010-10-25 13:29:29

您可以設置任何圖像的事件發生：

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

我不能給任何更具體的幫助，而無需知道CSS

編輯您正在使用「堆疊」卡片。

來源

2010-10-25 10:05:48 rjmunro

我已經添加了我的CSS，歡呼隊友，非常感謝幫助 – 2010-10-25 10:28:42

至於要觸發頁面更改的部分，您可以使用window.location在末尾附加散列。所以你的URL可能最終會被example.com/cards#joker

來源

2010-10-25 10:12:09

JQuery堆棧卡片

回答

相關問題