シームレスなスクロールのネイティブ JavaScript 実装 example_javascript スキル

現在、垂直スクロールと水平スクロールがサポートされています

http://lgyweb.com/marScroll/

次に、シームレスな実装 (垂直例) の基本的な考え方を分析してみましょう:

HTML 構造:

コードをコピー コードは次のとおりです:

コードをコピー

コードは次のとおりです:

(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(function(){
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 に設定します。 、その後、そのようなループ操作は継続的にスクロールします
------------------------------------- -------------- ------------------------------------ -------------- ------*/
// 呼び出しを容易にする関数 function を抽出します。
var fn = function(){
if (target.scrollTop == oUl_h){
target.scrollTop = 0;
}else{
target.scrollTop;
}
// setInterval ループ
var timer = setInterval(function(){
fn();
},30);
// ホバー
target.onmouseover = function(){
clearTimeout(timer);
target.onmouseout = function(){
タイマー = 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;
}
GyMarquee.prototype = {
marquee:function(){
var _that = this,
direction = 'scrollTop',
judge = this.target.scrollHeight,
タイマー = null;
if(this.dir == 'crosswise'){
direction = 'scrollLeft';
judge = this.itemLen*this.opt.itemWidth; .style.width = this.itemLen*this.opt.itemWidth*2 'px';
}
var doFn = function(){
if(_that.target[direction] == 判定){
_that.target[方向] = 0;
}
_that.target[方向]
}
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}; {
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 != unknown&&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.target .scrollHeight;
}
varholderHTML = this.target.innerHTML;
this.target.innerHTML = '

'
this .targetChild = this.getByClassName('J_scrollInner',this.target)[0];
var attr = this.dir == 'vertical'?'offsetHeight':'offsetWidth'; val>this .target[attr]){
if(this.effect == 'scroll'){
this.scrollDo();
this.marquee(); 🎜>}
this.targetChild.innerHTML = this.targetChild.innerHTML
}
}
}