원활한 스크롤 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으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

더보기

인기 기사

<garden> : 정원 재배 - 완전한 돌연변이 가이드

3 몇 주 전 By DDD

<gum> : Bubble Gum Simulator Infinity- 로얄 키를 얻고 사용하는 방법

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

KB5055612 수정 방법 Windows 10에 설치되지 않습니까?

3 몇 주 전 By DDD

Nordhold : Fusion System, 설명

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

Mandragora : 마녀 트리의 속삭임 - Grappling Hook 잠금 해제 방법

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

자바 튜토리얼

1665

14

Cakephp 튜토리얼

1423

52

라라벨 튜토리얼

1321

25

PHP 튜토리얼

1269

29

C# 튜토리얼

1249

24

더보기