원활한 스크롤 example_javascript 기술의 기본 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 타이머 = 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
}
}
}

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：프롬프트 information_javascript 기술을 팝업하는 Asp.Net 경고의 여러 방법 요약다음 기사：프롬프트 information_javascript 기술을 팝업하는 Asp.Net 경고의 여러 방법 요약

관련 기사

더보기

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술