[英]Make the element auto and repeat scroll up
<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(幻灯片)应该向上移动。
(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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.