原生javascript实现无间缝滚动示例

186 阅读 0 评论 123 点赞

我是靠谱客的博主纯情母鸡，最近开发中收集的这篇文章主要介绍原生javascript实现无间缝滚动示例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

目前支持的是竖向与横向滚动

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); 
} 
target.onmouseout = function(){ 
timer = setInterval(function(){ 
fn(); 
},30); 
} 
})(); 

已经完成了个简单的竖向无间缝，为了满足更多的需求，建议封装成可以，竖向，横向，多次调用的函数。

以下是个人的封装，线上例子：

http://lgyweb.com/marScroll/

复制代码代码如下:

 
function GyMarquee(opt){ 
this.opt = opt; 
if(!document.getElementById(this.opt.targetID)) return; 
this.target = document.getElementById(this.opt.targetID); 
this.dir = this.opt.dir == 'crosswise'?'crosswise':'vertical'; 
this.effect = this.opt.effect == 'scroll'?'scroll':'marque'; 
this.scrollHeight = this.opt.scrollHeight; 
this.init(); 
} 
GyMarquee.prototype = { 
marquee:function(){ 
var _that = this, 
direction = 'scrollTop', 
judge = this.target.scrollHeight, 
timer = null; 
if(this.dir == 'crosswise'){ 
direction = 'scrollLeft'; 
judge = this.itemLen*this.opt.itemWidth; 
this.targetChild.style.width = this.itemLen*this.opt.itemWidth*2 + 'px'; 
} 
var doFn = function(){ 
if(_that.target[direction] == judge){ 
_that.target[direction] = 0; 
} 
_that.target[direction]++; 
} 
timer = setInterval(function(){ 
doFn(); 
},38); 
this.target.onmouseover = function(){ 
if(timer) clearTimeout(timer); 
} 
this.target.onmouseout = function(){ 
timer = setInterval(function(){ 
doFn(); 
},38); 
} 
}, 
scrollDo:function(){ 
var can = true, 
_that = this; 
this.target.onmouseover=function(){can=false}; 
this.target.onmouseout=function(){can=true}; 
new function (){ 
var stop=_that.target.scrollTop%_that.scrollHeight==0&&!can; 
if(!stop)_that.target.scrollTop==parseInt(_that.target.scrollHeight/2)?_that.target.scrollTop=0:_that.target.scrollTop++; 
setTimeout(arguments.callee,_that.target.scrollTop%_that.scrollHeight?20:2500); 
}; 
}, 
getByClassName:function(className,parent){ 
var elem = [], 
node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'), 
p = new RegExp("(^|\s)"+className+"(\s|$)"); 
for(var n=0,i=node.length;n<i;n++){ 
if(p.test(node[n].className)){ 
elem.push(node[n]); 
} 
} 
return elem; 
}, 
init:function(){ 
var val = 0; 
if(this.dir =='crosswise'&&this.effect=='marque'&&this.opt.itemName!=''){ 
this.itemLen = this.target.getElementsByTagName(this.opt.itemName).length; 
val = this.itemLen*this.opt.itemWidth; 
}else{ 
val = this.target.scrollHeight; 
} 
var holderHTML = this.target.innerHTML; 
this.target.innerHTML = '<div class="J_scrollInner">'+holderHTML+'</div>'; 
this.targetChild = this.getByClassName('J_scrollInner',this.target)[0]; 
var attr = this.dir == 'vertical'?'offsetHeight':'offsetWidth'; 
if(val>this.target[attr]){ 
if(this.effect == 'scroll'){ 
this.scrollDo(); 
}else{ 
this.marquee(); 
} 
this.targetChild.innerHTML += this.targetChild.innerHTML; 
} 
} 
} 