H5新闻垂直滚动效果

做成不同样式的垂直滚动:无缝垂直滚动,间歇性垂直滚动(一次滚动一条),间歇性垂直滚动(一次滚动两条);

*先上代码(想知道原理的请往后看)~~~~*

变量解释:
speed:滚动的速度;
delay:暂停的时长;
scrollTop :滚动的高度;
scrollHeight:滚动元素的高度;

1. 无缝垂直滚动(无停歇的一直滚动)



	
		
		
		
		
		
	

	
		
111111111
222222222
333333333
44444444444
555555555
66666666
777777777777
888888888888

2. 间歇性垂直滚动(一次滚动一条)



	
		
		
		
		
		
	

	
		
111111111
222222222
333333333
44444444444
555555555
66666666
777777777777
888888888888

3. 间歇性垂直滚动(一次滚动两条)



	
		
		
		
		
		
	

	
		
111111111
222222222
333333333
44444444444
555555555
66666666
777777777777
888888888888

原理:
取出要显示文字的部分(这里暂且称其为a部分),复制一份a部分本身连接在a部分后面,形成重复一次的效果(这里暂且称之为aa部分);随着aa部分渐渐向上滚动,当aa部分滚动的高度与原本a部分的高度一样的时候,将aa部分迅速挪到最初始的位置,即可实现循环滚动的效果;

想要显示多条数据,只需要改动out样式的“height: 42px”部分即可;

后记:第一次写文,大概记录一下新闻垂直滚动的效果,原理不画图很难解释清楚哇…

你可能感兴趣的:(前端)