JQuery стека карт - PullRequest
Новая
       1

JQuery стека карт

0 голосов
/ 25 октября 2010

У меня есть стопка карт.Они сложены так, что каждый из них имеет около сантиметра в нижней части видимой.Я хочу, чтобы при нажатии на карточку она перемещалась вправо, затем сортировалась вверх и перемещалась в стопку влево.Затем я хочу вызвать изменение страницы (на страницу, которая представлена ​​картой).

Как бы я сделал это через 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>

Я знаю, что есть функция одушевления, но как бы я инициировал это по щелчку?

РЕДАКТИРОВАТЬ: добавлено больше кода выше

Ответы [ 3 ]

3 голосов
/ 25 октября 2010

для изменения хеша используйте плагин Бена Алмана для барбекю опробовал ваш код на jsbin
, но из-за отсутствия ссылки на карточки HTML не отображается правильно* если вы поместите здесь рабочий образец jsbin - вам будет проще помогать

относительно анимаций: если вы расположите Ли так, чтобы они имели абсолютную позицию, вы можете свободно перемещать их,
, чтобы вы моглианимируйте их влево, а затем анимируйте назад, а затем измените z-index, чтобы поместить его сверху

[править] Итак .. вот ссылка на быстрое решение :
у вас были некоторые проблемы с кодом анимации, + лучше сменить позицию, а не 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;
 }
3 голосов
/ 25 октября 2010

Вы можете установить событие, которое будет происходить на любом из изображений, нажимаемых, например: 

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

Я не могу оказать более конкретную помощь, не зная CSS, который вы используете для «укладки» карт.

1 голос
/ 25 октября 2010

Что касается части, в которой вы хотите инициировать изменение страницы, вы можете использовать window.location, чтобы добавить хеш в конец. Таким образом, ваш URL может оказаться example.com/cards#joker

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...