Переход дважды с одной целью (CSS3) - PullRequest
Новая
       28

Переход дважды с одной целью (CSS3)

1 голос
/ 23 ноября 2011

Я пытаюсь анимировать своего рода слайд-шоу с использованием CSS3 и его функций «переход» и «цель».

Пока у меня есть это: http://dk8.co/slide.html

Использование CSS: 

[id*=thumbs] {
    position: relative;
    left: 0px;
    top: 0px;
    -webkit-transition: all 1s;
    transition: all 1s;
}

[id*=thumbs]:target {
    position: relative;
    top: -100px;
}

#body {
    position:relative;
    left: 0px;
    top: 0px;
    height: 500px;
    width: 600px;
    overflow:hidden;
}

И HTML: 

<div style="position:absolute; top:200px; left:200px;width:600px;">
<p align="center"><a href="#thumbs">up</a>
<div id="body">
<table width="580" border="0" cellpadding="5" id="thumbs">
  <tr>
    <td><img src="" width="100%" height="160"  /></td>
    <td><img src="" width="100%" height="160"  /></td>
  </tr>
  <tr>
    <td><img src="" width="100%" height="160"  /></td>
    <td><img src="" width="100%" height="160"  /></td>
  </tr>
  <tr>
    <td><img src="" width="100%" height="160"  /></td>
    <td><img src="" width="100%" height="160"  /></td>
  </tr>
  <tr>
    <td><img src="" width="100%" height="160"  /></td>
    <td><img src="" width="100%" height="160"  /></td>
  </tr>
</table>
</div>
</div>

Однако, я могу получить переход только один раз. Я хочу иметь возможность снова щелкнуть «вверх» и заставить его двигаться еще больше. Есть ли способ сделать это?

Заранее спасибо!

1 Ответ

0 голосов
/ 06 декабря 2011

Вот очень простой пример использования вместо этого translate. Он достигает того, что вы хотите сделать без JavaScript.

Посмотрите на: http://www.designmadeingermany.de/slideshow/

Просмотрите исходный код, его кристально чистый.

...