原生javascript實作無間縫滾動範例_javascript技巧

目前支援的是垂直與橫向滾動

http://lgyweb.com/marScroll/

現在分析下無間縫實現的基本想法（垂直範例）：

HTML結構：

複製程式碼 程式碼如下:

• 01


• 02


• 03


• 04


• 05

CSS：

複製程式碼 程式碼如下:

（1）首先需要判斷裡面的內容高度ul結構是否高於外層div#marScrolll，則才進行無間縫滾動：

複製程式碼 程式碼如下:

// 寫在匿名函數裡面，防止全域變數污染
( function(){
var target = document.getElementById('marScroll'),
oUl = target.getElementsByTagName('ul')[0];
// 內容少，則直接退出此函數
if(oUl.offsetHeight})();

（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(ftion(unction) ){
fn();

},30); } 範例JS總程式碼：

複製程式碼


程式碼如下:


// 寫在匿名函數裡面，防止全域變數污染
(function(){
var target = document .getElementById('marScroll'),
oUl = target.getElementsByTagName('ul')[0],
oUl_h = oUl.offsetHeight;
// 內容少，則直接退出此函數
if(oUl_h
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.getElementBytal )) 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 = this. 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:f. 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 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.get.get.scrollHeighttar;
}
var holderHTML = this.target.innerHTML;
this.target.innerHTML = '

' holderHTML '

';
this.targetgetTld = 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;
}
}
}