原生javascript实现无间缝滚动示例
2024-05-06 14:30:07
供稿：网友
目前支持的是竖向与横向滚动
http://lgyweb.com/marScroll/
现在分析下无间缝实现的基本思路（竖向例子）：
HTML结构：
代码如下:
<div id="marScroll">
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
</div>
CSS：
代码如下:
<style type="text/css">
ul,li{padding: 0;margin: 0;}
#marScroll{height: 60px;overflow: hidden;}
#marScroll li{height: 20px;line-height: 20px;font-size: 14px;}
</style>
（1）首先需要判断里面的内容高度ul结构是否高于外层div#marScrolll，则才进行无间缝滚动：
代码如下:
// 写在匿名函数里面，防止全局变量污染
(function(){
var target = document.getElementById('marScroll'),
oUl = target.getElementsByTagName('ul')[0];
// 内容少，则直接退出此函数
if(oUl.offsetHeight<target.offsetHeight) return;
})();
（2）无间缝就是内容的无限滚动展示，那么先需要复制里面的内容，然后通过外层的scrollTop++属性，用setInterval 函数进行循环执行
代码如下:
target.innerHTML += target.innerHTML;
/* 判断每次滚动的距离等于第一个ul的高度时，设置scrollTop为0，然后如此的循环操作就是无间滚动了
---------------------------------------------------------------------------------------------*/
// 把功能函数抽离出来，方便调用
var fn = function(){
if(target.scrollTop == oUl_h){
target.scrollTop = 0;
}else{
target.scrollTop++;
}
}
// setInterval 循环
var timer = setInterval(function(){
fn();
},30);
（3）鼠标经过此内容块时，就停止滚动
代码如下:
// hover
target.onmouseover = function(){
clearTimeout(timer);
}
target.onmouseout = function(){
timer = setInterval(function(){
fn();
},30);
}
例子JS总代码：
代码如下:
// 写在匿名函数里面，防止全局变量污染
(function(){
var target = document.getElementById('marScroll'),
oUl = target.getElementsByTagName('ul')[0],
oUl_h = oUl.offsetHeight;
// 内容少，则直接退出此函数
if(oUl_h<target.offsetHeight) return;
target.innerHTML += target.innerHTML;
/* 判断每次滚动的距离等于第一个ul的高度时，设置scrollTop为0，然后如此的循环操作就是无间滚动了
---------------------------------------------------------------------------------------------*/
// 把功能函数抽离出来，方便调用
var fn = function(){
if(target.scrollTop == oUl_h){
target.scrollTop = 0;
}else{
target.scrollTop++;
}
}
// setInterval 循环
var timer = setInterval(function(){
fn();
},30);
// hover
target.onmouseover = function(){
clearTimeout(timer);
