JS는 텍스트 스크롤의 전체 예제를 구현합니다

저자：Eve Cole 업데이트 시간：2025-05-15 13:16:01

이 기사에서는 텍스트를 아래로 스크롤하는 JS의 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.

코드 사본은 다음과 같습니다.

<! doctype>

<html>

<헤드>

<title> jd.com 및 Taobao Listing </title>

<스타일>

@Charset "UTF-8";

@Name : 기본

@function : 브라우저 기본 스타일을 재설정합니다

/* 사용자 정의 배경색이 웹 페이지에 미치는 영향을 방지하고 사용자가 글꼴을 사용자 정의 할 수 있도록 추가*/

html {

색상 :#000; 배경 : #fff;

-webkit- 텍스트 크기 조정 : 100%;

-ms- 텍스트 크기 조정 : 100%;

}

/* 내부 및 외부 여백은 일반적으로 각 브라우저 스타일의 성능 위치를 다르게 만듭니다*/

Body, Div, DL, DT, DD, UL, OL, Li, H1, H2, H3, H4, H5, H6, PRE, CODE, FORM, FIELDSET, LEGEND, INPUT, TEXTAREA, P, BLOCKQUOTE, TH, TD, HR, 버튼, arti

CLE, 제외, 세부 사항, 그림, 그림, 바닥 글, 헤더, HGROUP, 메뉴, NAV, 섹션 {

여백 : 0; 패딩 : 0;

색상 :#333;

}

/ * html5 태그 재설정, 즉 JS */에서 CreateElement (TAG)가 필요합니다.

기사, 제쳐두고, 세부 사항, 그림, 그림, 바닥 글, 헤더, HGROUP, 메뉴, NAV, 섹션 {

디스플레이 : 블록;

}

/* html5 미디어 파일은 img*/와 일치합니다.

오디오, 캔버스, 비디오 {

디스플레이 : 인라인-블록;*디스플레이 : 인라인;*줌 : 1;

}

/* 양식 요소는 부모 글꼴을 상속하지 않습니다*/

본문, 버튼, 입력, 선택, TextArea {

글꼴 : 12px/1.5 Tahoma, Arial, // 5b8b // 4f53;

}

입력, 선택, TextArea {

글꼴 크기 : 100%;

}

/* 각 테이블 셀의 여백을 제거하고 가장자리가 겹치게하십시오*/

테이블{

국경-콜라스 : 붕괴; 국경 간격 : 0;

}

/* 즉, 버그 수정 : TH는 텍스트 정렬을 상속하지 않습니다*/

th {

텍스트 정렬 : 상속;

}

/* 기본 경계 제거*/

필드 셋, img {

국경 : 0;

}

/* IE6 7 8 (Q) 버그는 인라인 성능으로 표시됩니다*/

iframe {

디스플레이 : 블록;

}

/* Firefox 에서이 요소의 경계를 제거하십시오*/

ABBR, 약어 {

테두리 : 0; 글꼴 변수 : 정상;

}

/* 일관된 델 스타일*/

델 {

텍스트 결정 : 라인 스루;

}

주소, 캡션, 인용, 코드, dfn, em, th, var {

글꼴 스타일 : 정상;

글꼴 중량 : 500;

}

/ * 목록 전에 로고를 제거하면 Li는 상속 */

ol, ul {

목록 스타일 : 없음;

}

/* 정렬은 타이포그래피에서 가장 중요한 요소이며 모든 것을 중심으로하지 마십시오*/

캡션, th {

텍스트 정렬 : 왼쪽;

}

/* Yahoo에서 제목을 사용자 정의하고 여러 시스템 응용 프로그램에 적응하십시오*/

H1, H2, H3, H4, H5, H6 {

글꼴 크기 : 100%;

글꼴 중량 : 500;

}

Q : 전, Q : {이후

콘텐츠:'';

}

/* Unified SuperScript 및 첨자*/

sub, sup {

글꼴 크기 : 75%; 라인 높이 : 0; 위치 : 상대; 수직 정상 : 기준선;

}

sup {상단 : -0.5em;}

sub {하단 : -0.25em;}

에이{

색상 : #333;

}

/* 링크 디스플레이가 호버 상태에서 밑줄을 밑줄로 두십시오*/

A : 호버 {

텍스트 결정 : 밑줄;

색상 : #C00;

}

/* 페이지를 간결하게 유지하면서 밑줄이 기본적으로 표시되지 않습니다*/

ins, a {

텍스트 결정 : 없음;

}

/* 플로트 정리*/

.fn-clear : {이후

가시성 : 숨겨진;

디스플레이 : 블록;

글꼴 크기 : 0;

콘텐츠:" ";

Clear : 둘 다;

높이 : 0;

}

.fn-clear {

줌 : 1; / * IE6 IE7 */

}

/* 숨기기, 보통 JS*/와 협력하는 데 사용됩니다.

바디 .fn-hide {

디스플레이 : 없음;

}

/ * 부동으로 인한 버그를 줄이기 위해 인라인 설정 */

.fn-left, .fn-right {

디스플레이 : 인라인;

}

.fn-left {

플로트 : 왼쪽;

}

.fn-right {

플로트 : 오른쪽;

}

#Club {너비 : 888px; 높이 : 190px; 마진 : 40px 자동; 테두리 : 1px 고체 #dddddd; Border-Radius : 5px 5px 0px 0px;}

#Club .Modle {너비 : 443px; 높이 : 190px; 테두리 오른쪽 : 1px solid #dddddd; float : 왼쪽;}

#Club .modle_right {Border-Right : None; Float : Right;}

#Club .Modle .Modle_Title {너비 : 443px; 높이 : 29px; 라인-하이 (line-height : 29px; font-size : 12px; font-weight : bold; 배경 :#f3f3f3;}

#Club .Modle .Modle_Title Span {Padding-Left : 7px;}

#Club .Modle .Modle_con {너비 : 423px; 마진 : 0 자동; 높이 : 160px; 오버플로 : 숨겨진;}

#Club .Modle .Modle_Con ul Li {Border-Bottom : 1px #ddd 점선; 위치 : 상대;}

#Club .Modle .Modle_con .Modle_img {너비 : 50px; 높이 : 79px; 텍스트-정렬 : 중심;}

#Club .Modle .Modle_Con .Modle_img img {마진-탑 : 14px;}

#Club .Modle .Modle_Con .Modle_img I {디스플레이 : 블록; 너비 : 15px; 높이 : 17px; 배경 : URL (../ image/buy.png) No-Repeat; 위치 : 절대; 상단 : 10px; 왼쪽 : 60px;}

#Club .Modle .Modle_Con .Modle_Text {너비 : 337px; 높이 : 60px; 오버플로 : 숨겨진; 마진-탑 : 15px; 패딩 왼쪽 : 8px;}

#Club .Modle .Modle_Con .Modle_Text PA {색상 :#005EA7;}

#Club .Modle .Modle_Con .Modle_Text Div A {색상 :#999999;}

</스타일>

</head>

<body>

<div>

<ul>

<li>

<div>

<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>

</div>

</li>

<li>

<div>

<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>

</div>

</li>

<li>

<div>

<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>

</div>

</li>

<li>

<div>

<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>

</div>

</li>

<li>

<div>

<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>

</div>

</li>

</ul>

</div>

<div>

<ul>

<li>

<div>

<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>

</div>

</li>

<li>

<div>

<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>

</div>

</li>

<li>

<div>

<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>

</div>

</li>

<li>

<div>

<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>

</div>

</li>

<li>

<div>

<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>

</div>

</li>

</ul>

</div>

</div> <!-클럽 끝->

<cript>

$ (function () {

함수 scolldown (id, time) {

var liheight = $ ( "#"+id+"ul li"). 높이 ();

var time = time || 2500;

setInterval (function () {

$ ( "#"+id+"ul"). prepend ($ ( "#"+id+"ul li : lip"). css ( "높이", "0px"). 애니메이션 ({{

높이 : liheight+"px"

},"느린"));

},시간);

}

Scolldown ( "modle_left");

Scolldown ( "modle_right", 3000);

});

</스크립트>

</body>

</html>

이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.