JQuery Stack of Cards_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-22 07:58 出处：网络

I have a stack of cards. They are stacked so each one has about a centimetre at the bottom visible. What I want, is when a card is clicked it moves to the right, then gets sorted to the top and moves

I have a stack of cards. They are stacked so each one has about a centimetre at the bottom visible. What I want, is when a card is clicked it moves to the right, then gets sorted to the top and moves to the left back onto the pile. I then wish to trigger a page change (to the page that's represented by the card).

How would I do this through JQuery? I'm still at a basic level with this language.

<style>
#cardStack{
    height: 700px;
    width: 400px;   
    overflow:visible;
}
#cardStack ul{
    display:inline;
}
#cardStack li{
    z-i开发者_如何学编程ndex: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>

I know there's an animate function, but how would I initiate this on a click?

EDIT: Added more code above

for the hash change use ben alman's BBQ plugin tried your code at jsbin
but because the link to the cards is missing the HTML doesn't render right
if you put here a working jsbin sample - helping you will be mush easier

concerning the animations: if you layout the Li's to have an absolute position, you can move them around freely,
so you can animate them to the left and then animate back and then change the z-index to put it on the top

[edit] So.. here is a link to a quick solution:
you had some problems with the animations code, + better to change the position and not the marign

for ref the code:

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

and changed the css a bit:

 #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;
 }

You can set an event to occur on any of the images being clicked like:

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

I can't give any more specific help without knowing the CSS you are using to "stack" the cards.

As for the part where you want to trigger a page change, you can use window.location to append a hash to the end. So your URL might end up being example.com/cards#joker