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

前端技术 2023/09/03 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;
}
}
}

本文地址：https://www.stayed.cn/item/6789

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案