บทความนี้อธิบายวิธีการของ JS เพื่อให้ได้การเลื่อนข้อความแบบบรรทัดเดียวอย่างต่อเนื่อง แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
ไม่กี่วันที่ผ่านมาฉันเขียนข้อความบรรทัดเดียวเพื่อเลื่อนขึ้นไปอย่างต่อเนื่องสำหรับเพื่อน ตอนนี้ฉันแบ่งปันกับ Webers ที่ฉันต้องการ มาดูรหัส HTML และ CSS ก่อน:
CSS:
คัดลอกรหัสดังนี้: .wrap {padding: 10px; Border: 1px #ccc solid; ความกว้าง: 500px; มาร์จิ้น: 20px auto;}
.ROLL-WRAP {ความสูง: 130PX; ล้น: ซ่อน;}
html:
คัดลอกรหัสดังนี้: <div>
<div id = "Roll-wrap">
<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>
หลักการของเอฟเฟกต์แอนิเมชั่นนี้คือการเลื่อน UL ขึ้นไปบนความสูงของ Li และหลังจากการเลื่อนแล้ว Li แรกใน UL จะถูกวางไว้ในตอนท้ายของ UL ในเวลานี้ Li ที่สองดั้งเดิมจะกลายเป็น li แรกใน UL จากนั้นทำซ้ำการกระทำข้างต้นและทำซ้ำการเลื่อนอย่างต่อเนื่อง
รหัส JS (jQuery):
คัดลอกรหัสดังนี้: ฟังก์ชัน scrolltxt () {
ตัวควบคุม var = {}
ค่า = {}
t1 = 200, /*ถึงเวลาเล่นแอนิเมชั่น* /
t2 = 2000, /*ช่วงเวลาเล่น* / /
ศรี;
controls.rollWrap = $ ("#Roll-Wrap");
controls.rollWrapul = controls.rollwrap.children ();
controls.rollWraPlis = controls.rollwrapul.children ();
value.linums = controls.rollwraplis.length;
values.lieight = controls.rollwraplis.eq (0) .height ();
values.ulheight = controls.rollwrap.height ();
this.init = function () {
เล่นอัตโนมัติ ();
หยุดชั่วคราว ();
-
/*Scroll*/
ฟังก์ชั่น play () {
controls.rollwrapul.animate ({"margin-top": "-"+values.liheight}, t1, function () {
$ (นี่) .css ("ระยะขอบ", "0"). เด็ก (). eq (0) .appendto ($ (นี่));
-
-
/*เลื่อนอัตโนมัติ*/
ฟังก์ชั่น Autoplay () {
/ *เลื่อนหากความสูงและความสูงของแท็ก Li ทั้งหมดมากกว่าความสูงของ. roll-wrap */
if (value.liheight*value.linums> value.ulheight) {
si = setInterval (ฟังก์ชัน () {
เล่น();
}, t2);
-
-
/*การเลื่อนหยุดชั่วคราวเมื่อเมาส์ผ่าน UL*/
ฟังก์ชั่นหยุดชั่วคราว () {
controls.rollwrapul.on ({
"Mouseenter": function () {
ClearInterval (SI);
-
"Mouseleave": function () {
เล่นอัตโนมัติ ();
-
-
-
-
ใหม่ scrolltxt (). init ();
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน