marquee标签已被html5弃用,了解即可。
无缝滚动原理
var area = document.getElementById('moocBox');
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
con2.innerHTML = con1.innerHTML;
function scrollUp(){
if(area.scrollTop >= con1.offsetHeight){
area.scrollTop = 0;
}else{
area.scrollTop++;
}
}
scrollTop:向上滚动的值
offsetHeight:元素高度
当scrollTop = offsetHeight scrolltop归零。con1回到原来的位置。
间隔滚动
var area = document.getElementById('moocBox');
area.innerHTML+=area.innerHTML;
var speed = 50;
var liheight = 24;
var waitt = 1000;
var stop;
function scrollUp(){
if(area.scrollTop>=area.scrollHeight/2){
area.scrollTop = 0;
}else{
area.scrollTop++;
if(area.scrollTop % liheight ==0){
clearInterval(myScroll);
stop = setTimeout('myScroll = setInterval(scrollUp,speed)',waitt);
}
}
}
var myScroll = setInterval(scrollUp,speed)
scrollHeight:可滚动的高度