欢迎来到福编程网,本站提供各种互联网专业知识!

简单实现js间歇或无缝滚动效果

发布时间:2016-06-29 作者:羯瑞。♑ 来源:转载
这篇文章主要为大家详细介绍了如何简单便捷的实现js间歇或无缝滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

间歇、无缝滚动效果(用gif录制的效果不是很好,有兴趣的可以down代码),具体内容如下

代码:




 
 无缝滚动
 
 


 
1无缝滚动
2无缝滚动
3无缝滚动
4无缝滚动
5无缝滚动
6无缝滚动
7无缝滚动
8无缝滚动
9无缝滚动
10无缝滚动
11无缝滚动
12无缝滚动
13无缝滚动
14无缝滚动
15无缝滚动
1间歇滚动
2间歇滚动
3间歇滚动
4间歇滚动
5间歇滚动
6间歇滚动
7间歇滚动
8间歇滚动
9间歇滚动
10间歇滚动
11间歇滚动
12间歇滚动
13间歇滚动
14间歇滚动
15间歇滚动

注意点:

1.盒子块要css 溢出隐藏:overflow:hidden

2.有两个功能:间歇滚动/无缝滚动

3.先复制一块一模一样的代码,无缝滚动:执行定时器一直增加scrollTop值,当scrollTop值大于盒子高度,在设置scrollTop为0,重新来过。间歇滚动在此基础上加了setTimeout,间歇执行,在scrollTop到达指定的height停止

4.疑问:代码中setInterval(function(){scrollIng()},30);这样写才可以执行,setInterval('scrollIng()',30);这样就不行,有没有大神指导下,两者有啥区别?是啥机制?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持全福编程网。

相关推荐