이 기사에서는 텍스트를 아래로 스크롤하는 JS의 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype>
<html>
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<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 id = "club">
<div id = "modle_left">
<H2> <span> 인기있는 목록 </span> </h2>
<div>
<ul>
<li>
<div> <a href = "###"> <img src = "image/ho1.jpg"> </a> </i> </div>
<div>
<p> <a href = "###"> 아주 좋은 전기 주전자 </a> </p>
<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho2.jpg"> </a> </i> </div>
<div>
<p> <a href = "###"> 아주 좋은 전기 주전자 </a> </p>
<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho1.jpg"> </a> </i> </div>
<div>
<p> <a href = "###"> 아주 좋은 전기 주전자 </a> </p>
<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho2.jpg"> </a> </i> </div>
<div>
<p> <a href = "###"> 아주 좋은 전기 주전자 </a> </p>
<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho3.jpg"> </a> </i> </div>
<div>
<p> <a href = "###"> 아주 좋은 전기 주전자 </a> </p>
<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>
</div>
</li>
</ul>
</div>
</div>
<div id = "modle_right">
<H2> <span> 인기있는 목록 </span> </h2>
<div>
<ul>
<li>
<div> <a href = "###"> <img src = "image/ho1.jpg"> </a> </i> </div>
<div>
<p> <a href = "###"> 아주 좋은 전기 주전자 </a> </p>
<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho2.jpg"> </a> </i> </div>
<div>
<p> <a href = "###"> 아주 좋은 전기 주전자 </a> </p>
<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho3.jpg"> </a> </i> </div>
<div>
<p> <a href = "###"> 아주 좋은 전기 주전자 </a> </p>
<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho1.jpg"> </a> </i> </div>
<div>
<p> <a href = "###"> 아주 좋은 전기 주전자 </a> </p>
<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho2.jpg"> </a> </i> </div>
<div>
<p> <a href = "###"> 아주 좋은 전기 주전자 </a> </p>
<div> <a href = ""> 속도가 매우 빠릅니다. 신호는 양호하고 설정하기 쉽습니다. 가장 중요한 것은 얼마나 많은 트래픽이 사용되는지 </a> </div>
</div>
</li>
</ul>
</div>
</div>
</div> <!-클럽 끝->
<script type = "text/javaScript"src = "jQuery-1.4.js"> </script>
<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 프로그래밍에 도움이되기를 바랍니다.