이 기사에서는 단일 라인 텍스트의 중단되지 않은 스크롤을 달성하기위한 JS의 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
며칠 전, 나는 친구를 위해 연속적으로 위로 스크롤하기 위해 한 줄의 텍스트를 썼습니다. 이제 필요한 웨커와 공유합니다. 먼저 HTML 및 CSS 코드를 살펴 보겠습니다.
CSS :
다음과 같이 코드를 복사하십시오. .wrap {패딩 : 10px; 테두리 : 1px #ccc solid; 너비 : 500px; 마진 : 20px 자동;}
.ROLL-WRAP {높이 : 130px; 오버플로 : 숨겨진;}
HTML :
다음과 같이 코드를 복사하십시오. <div>
<div id = "롤-랩">
<ul>
<li> js 텍스트 스크롤 업 1 </li>
<li> js 텍스트 스크롤 업 2 </li>
<li> js 텍스트 스크롤 업 3 </li>
<li> js 텍스트 스크롤 업 4 </li>
<li> js 텍스트 스크롤 업 5 </li>
<li> js 텍스트 스크롤 업 6 </li>
<li> js 텍스트 스크롤 7 </li>
</ul>
</div>
</div>
이 애니메이션 효과의 원리는 먼저 Li의 높이를 위쪽으로 스크롤하는 것입니다. 스크롤 후 UL의 첫 번째 Li는 UL의 끝에 배치됩니다. 이 시점에서 원래의 두 번째 Li는 UL의 첫 번째 Li가되고 위의 동작을 반복하고 연속 스크롤을 반복합니다.
JS (jQuery) 코드 :
다음과 같이 코드를 복사하십시오 : function scrolltxt () {
var controls = {},
값 = {},
T1 = 200, /*애니메이션을 재생하는 시간* /
T2 = 2000, /*재생 시간 간격* /
시;
controls.rollwrap = $ ( "#roll-wrap");
controls.rollWrapul = controls.rollwrap.children ();
controls.rollwraplis = controls.rollwrapul.children ();
values.linums = controls.rollwraplis.length;
values.liheight = controls.rollwraplis.eq (0) .height ();
values.ulheight = controls.rollwrap.height ();
this.init = function () {
autoplay ();
일시 정지 플레이 ();
}
/*스크롤*/
함수 재생 () {
controls.rollWrapul.animate ({ "margin-top": "-"+values.liheight}, t1, function () {
$ (this) .css ( "margin-top", "0"). children (). eq (0) .appendto ($ (this));
});
}
/*자동 스크롤*/
함수 autoplay () {
/ *모든 li 태그의 높이와 높이가 .Roll-grap */의 높이보다 큰 경우 스크롤하십시오.
if (values.liheight*value.linums> value.ulheight) {
si = setInterval (function () {
놀다();
}, t2);
}
}
/*마우스가 UL*/에 의해 통과되면 스크롤이 일시 중지됩니다.
함수 pauseplay () {
Controls.rollWrapul.on ({{
"마우스 센터": function () {
ClearInterval (SI);
},
"Mouseleave": function () {
autoplay ();
}
});
}
}
새로운 scrolltxt (). init ();
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.