间歇、无缝滚动效果(用gif录制的效果不是很好,有兴趣的可以down代码),具体内容如下
代码:
无缝滚动 *{margin:0;padding:0;} .box{width: 500px;height: 400px;margin:40px auto;background: #ccc;overflow: hidden;} .block{position: relative;width: 500px;height: 400px;overflow: hidden;} .item{height: 40px;background: red;color: #fff;line-height: 40px;text-align: center;} .item:nth-child(2n){background: #000} 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);这样就不行,有没有大神指导下,两者有啥区别?是啥机制?
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。



