В этой статье описывается метод JS для достижения непрерывной прокрутки однострочного текста. Поделитесь этим для вашей ссылки. Конкретный анализ заключается в следующем:
Несколько дней назад я написал одну строку текста, чтобы постоянно прокручивать вверх для друга. Теперь я делюсь этим с Webers, которые мне нужно. Сначала посмотрим на код HTML и CSS:
CSS:
Скопируйте код следующим образом: .wrap {padding: 10px; граница: 1px #ccc solid; Ширина: 500px; маржа: 20px Auto;}
.roll-wrap {eight: 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 Text Scrolling 5 </li>
<li> JS текст прокручивает 6 </li>
<li> JS Text Scrolling вверх 7 </li>
</ul>
</div>
</div>
Принцип этого анимационного эффекта состоит в том, чтобы сначала прокрутить UL вверх высотой LI, и после прокрутки первое LI в UL помещается в конце UL. В это время первоначальный второй LI становится первым LI в UL, а затем повторяет вышеупомянутые действия и повторяйте непрерывную прокрутку.
JS (jQuery) Код:
Скопируйте код следующим образом: function scrolltxt () {
var controls = {},
values = {},
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 ();
pauseplay ();
}
/*Прокрутка*/
функция play () {
controls.rollwrapul.animate ({"margin-top": "-"+values.liheight}, t1, function () {
$ (this) .css ("рентабельная stop", "0"). Children (). EQ (0) .appendto ($ (this));
});
}
/*Автопрокат*//
функция AutoPlay () {
/ *Прокрутите, если высота и высота всех тегов LI больше высоты .roll-wrap */
if (values.liheight*values.linums> values.ulheight) {
si = setInterval (function () {
играть();
}, T2);
}
}
/*Прокрутка пауза, когда мышь проходит через UL*/
функция pauseplay () {
controls.rollwrapul.on ({
"MouseEnter": function () {
ClearInterval (SI);
},
"MouseLeave": function () {
Autoplay ();
}
});
}
}
новый scrolltxt (). init ();
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.