تصف هذه المقالة طريقة JS لتحقيق التمرير دون انقطاع لنص خط واحد. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
قبل بضعة أيام ، كتبت خطًا واحدًا من النص للتمرير لأعلى باستمرار لصديق. الآن أشاركها مع Webers التي أحتاجها. دعونا نلقي نظرة على رمز HTML و CSS أولاً:
CSS:
انسخ الرمز كما يلي: .wrap {padding: 10px ؛ الحدود: 1px #ccc solid ؛ العرض: 500 بكسل ؛ الهامش: 20 بكسل Auto ؛}
.roll-wrap {الارتفاع: 130 بكسل ؛ تجاوز: مخفي ؛}
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 text التمرير لأعلى 7 </li>
</ul>
</div>
</div>
يتمثل مبدأ تأثير الرسوم المتحركة هذا أولاً في تمرير UL إلى أعلى ارتفاع LI ، وبعد التمرير ، يتم وضع أول LI في UL في نهاية UL. في هذا الوقت ، يصبح LI الثاني الأصلي هو الأول في UL ، ثم كرر الإجراءات المذكورة أعلاه ، وكرر التمرير المستمر.
رمز JS (jQuery):
انسخ الرمز كما يلي: وظيفة scrolltxt () {
Var Controls = {} ،
القيم = {} ،
T1 = 200 ، /*حان الوقت للعب الرسوم المتحركة* /
T2 = 2000 ، /*الفاصل الزمني للعب* /
SI
Controls.RollWrap = $ ("#Roll-Wrap") ؛
controls.rollwrapul = controls.rollwrap.children () ؛
Controls.RollWraplis = controls.rollwrapul.children () ؛
القيم.
القيم.
القيم.
this.init = function () {
autoplay () ؛
pauseplay () ؛
}
/*التمرير*/
وظيفة play () {
controls.rollwrapul.animate ({"margin-top": "-"+values.liheight} ، t1 ، function () {
$ (this) .css ("hargin-top" ، "0"). الأطفال (). Eq (0) .Appendto ($ (this)) ؛
}) ؛
}
/*التمرير التلقائي*/
وظيفة Autoplay () {
/ *قم بالتمرير إذا كان ارتفاع وارتفاع جميع علامات LI أكبر من ارتفاع .roll-wrap */
if (stable.liHeight*values.linums> base.ulheight) {
si = setInterval (function () {
يلعب()؛
} ، t2) ؛
}
}
/*التوقف مؤقتًا عندما يمر الماوس بواسطة UL*/
وظيفة pauseplay () {
Controls.rollwrapul.on ({
"Mouseenter": Function () {
Clearinterval (SI) ؛
} ،
"MouseLeave": Function () {
autoplay () ؛
}
}) ؛
}
}
new ScrollTxt (). init () ؛
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.