1
<div id="par">
  <div id="item11"></div>
  <div id="item12"></div>
  <div id="item13"></div>
  <div id="item14"></div>
  ....
</div>

我想让div#itemXX元素在div#par. 我也希望它每次移动一个 div。

我可以使用<marquee>标签,但它已被弃用,所以我想知道是否有其他方法?

顺便说一句,高度div#itemXX不固定。

更新: 我希望“div#itemXX”每次移动一个。就像幻灯片一样,每次显示一个div,但是如果当前div的高度大于视口,它应该向上滚动,当滚动结束时,下一个div(幻灯片)应该向上移动。

4

1 回答 1

3
(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/

于 2011-07-09T11:06:33.440 回答