信息滚动效果

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值