Сделайте элемент автоматическим и повторите прокрутку вверх - PullRequest
Новая
       4

Сделайте элемент автоматическим и повторите прокрутку вверх

1 голос
/ 09 июля 2011 
<div id="par">
  <div id="item11"></div>
  <div id="item12"></div>
  <div id="item13"></div>
  <div id="item14"></div>
  ....
</div>

Я хочу, чтобы элементы div#itemXX автоматически прокручивались вверх внутри div#par. Также я хочу, чтобы он перемещался на один дел каждый раз.

Я могу использовать тег <marquee>, но он устарел, поэтому мне интересно, есть ли другие способы?

Кстати, высота div#itemXX не фиксирована.

UPDATE: Я хочу, чтобы "div # itemXX" перемещался по одному каждый раз. Как и в слайд-шоу, каждый раз показывайте один div, но если высота текущего div больше, чем область просмотра, он должен прокручиваться вверх, а когда конец прокрутки, следующий div (слайд) должен двигаться вверх.

1 Ответ

3 голосов
/ 09 июля 2011 
(function(){
var top=0;
var par = document.getElementById('par')
var scroll = function() {
  top++;
  if( top>=par.firstElementChild.offsetHeight )
  {
    //first element is out of sight, so move to the end of the list
    top=0;
    par.firstElementChild.style.marginTop='';//reset to zero
    par.appendChild(par.firstElementChild);
  }
  else
  {
     //move the first element 'top' px up
     par.firstElementChild.style.marginTop='-'+top+'px';
  }
  setTimeout(scroll, 100);//repeat after 100ms
}
scroll();
})()

jsbin: http://jsbin.com/onohan/3/

...