원활한 스크롤 example_javascript 기술의 기본 JavaScript 구현-JS 튜토리얼-php.cn

현재 수직 및 수평 스크롤이 지원됩니다

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 타이머 = 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으로 설정합니다. , 그런 다음 이러한 루프 작업은 계속해서 스크롤됩니다.
------------ -------------- ----------------------- -------------- ------*/
//
var fn = function(){
if (target.scrollTop == oUl_h){
target.scrollTop = 호출을 용이하게 하기 위해 함수 추출 0;
}else{
target.scrollTop;
}
}
// setInterval 루프
var 타이머 = setInterval(function(){
fn();
},30);
// hover
target.onmouseover = function(){
clearTimeout(timer)
}
target.onmouseout = function(){
타이머 = setInterval(function(){
fn();
},30)
}
})()

간단한 수직 이음새 없는 기능이 완성되었습니다. 더 많은 요구를 충족시키기 위해 수직, 수평, 여러 번 호출할 수 있는 기능으로 캡슐화하는 것이 좋습니다.

다음은 개인 캡슐화된 온라인 예입니다.

http://lgyweb.com/marScroll/

코드 복사 코드는 다음과 같습니다.

 
function GyMarquee(opt){ 
this.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 == 'scroll'?'scroll':'marque' 
this.scrollHeight = this.opt.scrollHeight; 🎜>} 
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; .style.width = this.itemLen*this.opt.itemWidth*2 'px'; 
} 
var doFn = function(){ 
if(_that.target[direction] == 판사){ 
 _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}; { 
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 != undefine&&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.효과=='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 = ''holderHTML '
'; 🎜>this .targetChild = this.getByClassName('J_scrollInner',this.target)[0]; 
var attr = this.dir == 'vertical'?'offsetHeight':'offsetWidth' 
if( val>this .target[attr]){ 
if(this.효과 == 'scroll'){ 
this.scrollDo() 
}else{ 
this.marquee(); 🎜>} 
this.targetChild.innerHTML = this.targetChild.innerHTML 
} 
} 
} 