信息滚动效果

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:可滚动的高度

猜你喜欢

转载自blog.csdn.net/qq_32522799/article/details/85053571