여러 브라우저_javascript 기술과 호환되는 매우 우수한 연속 스크롤 클래스-JS 튜토리얼-php.cn

레이어 만들기

그런 다음 스크립트 파일을 호출합니다

집

웹 프론트엔드

JS 튜토리얼

여러 브라우저_javascript 기술과 호환되는 매우 우수한 연속 스크롤 클래스

May 16, 2016 pm 07:22 PM

호출 방법:
먼저 스크립트를 페이지에 연결하거나 아래 링크로 직접 호출할 수 있습니다. 물론 자신의 컴퓨터에 다운로드하는 것이 가장 좋습니다.

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

<script type="text/javascript" src= "http: //www.aeroom.org/include/scripts/scrollingAD.js"></script> 

다음은 첫 번째 사용 방법인데 더 번거로워 보이지만 두 줄만 있으면 됩니다.

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

var SampleDiv = new scrollingAD("divId" , 200, 100, "yellow" , "up", 10, 2000, 20, true); 
sampleDiv.move() 

이것은 특정 DIV 객체를 기반으로 중단 없는 DIV 객체를 생성합니다. 문서에서 id="divId"를 사용하면 스크롤 영역을 순환합니다. 이 영역의 너비는 200px, 높이는 100px, 배경색은 노란색(영어가 서툴러도 걱정하지 마세요. "#ff00ff"와 같은 형식을 사용할 수도 있습니다), 방향은 위로 스크롤됩니다. 실제로 왼쪽으로 스크롤하도록 선택할 수도 있습니다. "위쪽"을 "왼쪽"으로 변경하면 됩니다. 하지만 오른쪽과 아래로 스크롤하는 것은 지원되지 않으므로 "오른쪽"과 "아래"를 시도할 필요가 없습니다. 실제로 이 두 방향을 구현하는 것은 매우 쉽지만 개인적으로 실용적이지 않다고 생각하므로 그렇게 하지 않았습니다. t do it - 스크롤당 1px 지연 시간은 10ms입니다. 이는 이상적인 스크롤이 초당 100px임을 의미합니다. 20px 스크롤할 때마다 일시 중지되며, 각 일시 중지는 2초입니다. 그리고 마우스 호버를 지원합니다.
위에 언급된 매개변수의 순서는 엄격하게 준수되어야 합니다. 즉, 다음 순서로 배열되어야 합니다. 게으른 분들은 쉼표를 사용해서 건너뛰시면 됩니다:

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

레이어 ID는 필수 항목입니다. 입력하지 않거나 잘못 입력하면 오류가 발생합니다. 
스크롤 영역의 너비는 모두 200px입니다. 기본값은 스크롤링AD에서 수정할 수 있습니다. 
스크롤 영역 높이의 너비는 50px입니다. 
배경색은 투명합니다. 🎜>5. 방향, 선택적 값 "위/왼쪽"; 
모든 스크롤 지연 시간은 1px, 기본값은 20입니다. 단위는 ms입니다. 값이 클수록 스크롤이 느려집니다. 🎜>7. 각 스크롤 제한 거리 이후의 정체 시간도 ms이며 기본값은 2000, 즉 2초입니다. - - 정체를 원하지 않으면 0으로 설정하면 됩니다. . 각각의 두 정체 사이의 스크롤 거리, 기본값은 한 화면입니다. 즉, 설정한 방향이 "위쪽"이면 기본값은 스크롤 영역의 높이와 같고, 그렇지 않으면 방향이 "왼쪽"이면 기본값은 스크롤 영역의 너비입니다. 
호버링 여부는 기본값이 true이며, 입력하지 않아도 상관없습니다. 
 

두 번째 방법은 다음과 같습니다. 

코드 복사 코드는 다음과 같습니다. var SampleDiv = new scrollingAD("divId") sampleDiv.move( );

이런 식으로 사용되는 값은 모두 기본값이지만 특정 매개변수를 변경해야 한다고 생각되면 다음과 같이 하면 됩니다.

var SampleDiv = new scrollingAD("divId" );
sampleDiv.width = 500;
sampleDiv.height = 100;
sampleDiv.bgColor = "빨간색";
sampleDiv.direction = "왼쪽"; ;
sampleDiv.pauseTime = 1000;
sampleDiv.size = 50;
SampleDiv.isHover =
sampleDiv.move();
물론 위와 같이 모두 작성할 필요는 없고 필요한 매개변수만 수정하면 됩니다. 첫 번째 방법을 사용하여 스크롤 영역을 생성하고 나중에 이 방식으로 수정하는 경우 후자의 방법이 우선합니다.
이 스크롤 영역을 만들려면 다음 순서를 사용해야 합니다.

[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]
팁: 먼저 수정할 수 있습니다. 코드의 일부를 다시 실행하세요.
업데이트:
이제 백분율을 사용하여 다음과 같이 크기 매개변수를 정의할 수 있습니다.
var SampleDiv = new scrollingAD("sampleDiv")
sampleDiv.size = "50%" ;// 참고로 따옴표를 추가해야 합니다. 그렇지 않으면 오류가 발생합니다.
sampleDiv.move();

" + "

" + this.object.innerHTML + "

"; } else { this.object.innerHTML = "" + this.object.innerHTML + "" + "" + this.object.innerHTML + ""; } if(document.getElementById(this.id)) { var evalString; if(this.direction == "up") { evalString = "scrollToUp(\"" + this.id + "\", " + this.isHover + ", " + this.delay + ", " + this.size + ", " + this.pauseTime + ", 0) "; } else { evalString = "scrollToLeft(\"" + this.id + "\", " + this.isHover + ", " + this.delay + ", " + this.size + ", " + this.pauseTime + ", 0) "; } eval(evalString); } else { return false; } function pixelToNum(_string) { //该函数用于去掉数值后面的px，并将之转化为数字。 if(_string.slice(_string.length - 2) == "px") { return parseInt(_string.slice(0, (_string.length - 2))); } else { return _string; } } function scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, _s) { var obj = document.getElementById(_id); var mirror = document.getElementById(_id + "_mirror"); if(_size*(1 + parseInt(_s)) + pixelToNum(mirror.style.marginLeft) >= 0) { var evalString =_id + "_timer = window.setTimeout(function() {scrollToLeft(\"" + _id + "\", " + _isHover + ", " + _delay + ", " + _size + ", " + _pauseTime + ", " + _s + ");}, " + _delay + ")"; if(_isHover) { mirror.onmouseover = function() {document.getElementById(_id + "_isHover").value = 0;} mirror.onmouseout = function() {document.getElementById(_id + "_isHover").value = 1;} var step = parseInt(document.getElementById(_id + "_isHover").value); mirror.style.marginLeft = (pixelToNum(mirror.style.marginLeft) - step) + "px"; eval("var " + evalString); } else { mirror.style.marginLeft = (pixelToNum(mirror.style.marginLeft) - 1) + "px"; eval("var " + evalString); } } else { if(mirror.offsetWidth + pixelToNum(mirror.style.marginLeft) >= 0) { _s += 1; window.setTimeout(function() {scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, _s)}, _pauseTime); } else { mirror.style.marginLeft = mirror.offsetWidth + pixelToNum(mirror.style.marginLeft) + "px";; window.setTimeout(function() {scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, 0)}, _pauseTime); } } } function scrollToUp(_id, _isHover, _delay, _size, _pauseTime, _s) { var obj = document.getElementById(_id); var mirror = document.getElementById(_id + "_mirror"); if(_size*(1 + parseInt(_s)) + pixelToNum(mirror.style.marginTop) >= 0) { var evalString =_id + "_timer = window.setTimeout(function() {scrollToUp(\"" + _id + "\", " + _isHover + ", " + _delay + ", " + _size + ", " + _pauseTime + ", " + _s + ");}, " + _delay + ")"; if(_isHover) { mirror.onmouseover = function() {document.getElementById(_id + "_isHover").value = 0;} mirror.onmouseout = function() {document.getElementById(_id + "_isHover").value = 1;} var step = parseInt(document.getElementById(_id + "_isHover").value); mirror.style.marginTop = (pixelToNum(mirror.style.marginTop) - step) + "px"; eval("var " + evalString); } else { mirror.style.marginTop = (pixelToNum(mirror.style.marginTop) - 1) + "px"; eval("var " + evalString); } } else { if(mirror.offsetHeight + pixelToNum(mirror.style.marginTop) >= 0) { _s += 1; window.setTimeout(function() {scrollToUp(_id, _isHover, _delay, _size, _pauseTime, _s)}, _pauseTime); } else { mirror.style.marginTop = mirror.offsetHeight + pixelToNum(mirror.style.marginTop) + "px";; window.setTimeout(function() {scrollToUp(_id, _isHover, _delay, _size, _pauseTime, 0)}, _pauseTime); } } } } 얻은 효과는 주기가 두 번만 스크롤된다는 것입니다. 마찬가지로 한 번에 주기를 스크롤하는 경우 크기를 "100%"로 설정하면 됩니다. 그러나 임의로 백분율을 설정하는 것은 권장하지 않습니다. 행 수에 맞는 값으로 설정하십시오. 그렇지 않으면 예상치 못한 공백이 나타날 수 있습니다. 물론 숫자는 계속 지원됩니다 :)

본 웹사이트의 성명

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