이 기사의 예에서는 JS를 사용하여 텍스트 스크롤 다운을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.
JD.com, Taobao 주문 게시
<스타일>
@charset "utf-8";
/*
@name: 베이스
@기능: 브라우저 기본 스타일 재설정
*/
/* 사용자가 정의한 배경색이 웹 페이지에 미치는 영향을 방지하고 사용자를 추가하여 글꼴을 사용자 정의 */
HTML{
색상:#000;배경:#fff;
-웹킷-텍스트-크기-조정: 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, 시간,버튼,아티
cle,aside,details,figcaption,그림,바닥글,헤더,hgroup,메뉴,nav,섹션 {
여백:0;패딩:0;
색상:#333;
}
/* HTML5 태그 재설정, IE에서는 js에서 createElement(TAG)가 필요함 */
기사,곁으로,세부 사항,그림 캡션,그림,바닥글,헤더,hgroup,메뉴,nav,섹션 {
디스플레이:블록;
}
/* HTML5 미디어 파일은 img와 일치합니다. */
오디오,캔버스,비디오 {
디스플레이: 인라인 블록;*디스플레이: 인라인;*확대/축소: 1;
}
/* 양식 요소는 상위 글꼴을 상속하지 않는다는 점에 유의하세요. */
본문,버튼,입력,선택,텍스트 영역{
글꼴:12px/1.5 tahoma,arial,\5b8b\4f53;
}
입력,선택,텍스트 영역{
글꼴 크기:100%;
}
/* 각 표 셀의 여백을 제거하고 측면을 겹치게 만듭니다. */
테이블{
테두리 접기:접기;테두리 간격:0;
}
/* IE 버그 수정: 텍스트 정렬을 상속하지 않음*/
일{
텍스트 정렬:상속;
}
/* 기본 테두리 제거 */
필드세트,img{
테두리:0;
}
/* ie6 7 8(q) 버그는 인라인 동작으로 표시됩니다. */
아이프레임{
디스플레이:블록;
}
/* Firefox에서 이 요소의 테두리를 제거합니다. */
약어,약어{
테두리:0;글꼴 변형:일반;
}
/* 일관된 델 스타일 */
델 {
텍스트 장식:줄 통과;
}
주소,캡션,인용,코드,dfn,em,th,var {
글꼴 스타일:일반;
글꼴 두께:500;
}
/* 목록 앞의 식별자를 제거하면 li가 상속됩니다. */
올,울 {
목록 스타일:없음;
}
/* 정렬은 레이아웃에서 가장 중요한 요소입니다. 모든 것을 중앙에 두지 마세요 */
캡션,번째 {
텍스트 정렬:왼쪽;
}
/* Yahoo에서는 여러 시스템 애플리케이션에 맞게 제목을 사용자 정의할 수 있습니다. */
h1,h2,h3,h4,h5,h6 {
글꼴 크기:100%;
글꼴 두께:500;
}
q:이전,q:이후 {
내용:'';
}
/* 위 첨자와 아래 첨자 통합 */
서브, 저녁 먹어 {
글꼴 크기: 75%; 줄 높이: 0; 위치: 상대; 수직 정렬: 기준선;
}
저녁 {상위: -0.5em;}
하위 {하단: -0.25em;}
아{
색상: #333;
}
/* 마우스를 올려놓은 상태에서 링크에 밑줄이 표시되도록 합니다. */
a:호버 {
텍스트 장식:밑줄;
색상: #c00;
}
/* 페이지를 단순하게 유지하기 위해 기본적으로 밑줄은 표시되지 않습니다. */
인,a {
텍스트 장식:없음;
}
/* 플로트 정리 */
.fn-clear:이후 {
가시성:숨김;
디스플레이:블록;
글꼴 크기:0;
내용:" ";
지우기:둘 다;
높이:0;
}
.fn-클리어 {
Zoom:1; /* IE6 IE7의 경우 */
}
/* 숨겨짐, 일반적으로 JS와 함께 사용됨 */
body .fn-hide {
디스플레이:없음;
}
/* 设置内联, 减少浮动带来的bug */
.fn-left,.fn-right {
display:inline;
}
.fn-left {
float:left;
}
.fn-right {
float:right;
}
#club{width:888px;height:190px;margin:40px auto;border:1px solid #dddddd;border-radius:5px 5px 0px 0px;}
#club .modle{width:443px;height:190px;border-right:1px solid #dddddd;float:left;}
#club .modle_right{border-right:none;float:right;}
#club .modle .modle_title{width:443px;height:29px;line-height:29px;font-size:12px;font-weight:bold;background:#f3f3f3;}
#club .modle .modle_title span{padding-left:7px;}
#club .modle .modle_con{width:423px;margin:0 auto;height:160px;overflow:hidden;}
#club .modle .modle_con ul li{border-bottom:1px #DDD dotted;position:relative;}
#club .modle .modle_con .modle_img{width:50px;height:79px;text-align:center;}
#club .modle .modle_con .modle_img img{margin-top:14px;}
#club .modle .modle_con .modle_img i{display:block;width:15px;height:17px;background:url(../image/buy.png)no-repeat;position:absolute;top:10px;left:60px;}
#club .modle .modle_con .modle_text{width:337px;height:60px;overflow:hidden;margin-top:15px;padding-left:8px;}
#club .modle .modle_con .modle_text p a{color:#005ea7;}
#club .modle .modle_con .modle_text div a{color:#999999;}
$(함수(){
함수 scolDown(id,time){
var liHeight=$("#" id " ul li").height();
var time=time||2500;
setInterval(함수(){
$("#" id " ul").prepend($("#" id " ul li:last").css("height","0px").animate({
높이:liHeight "px"
},"느림"));
},시간);
}
scollDown("modle_left");
scollDown("modle_right",3000);
});
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
