この記事では、シングルラインテキストの途切れないスクロールを実現するJSの方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
数日前、私は友人のために上向きにスクロールするために単一のテキストを書きました。今、私はそれを必要なウェーバーと共有します。最初にHTMLおよびCSSコードを見てみましょう。
CSS：
コードを次のようにコピーします。.wrap{padding：10px; border：1px #ccc solid;幅：500px;マージン：20px auto;}
.roll-wrap {height：130px; overflow：hidden;}
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の高さを上にスクロールすることであり、スクロール後、ULの最初のLIがULの終わりに配置されます。この時点で、元の2番目のLIがULの最初のLiになり、上記のアクションを繰り返し、連続スクロールを繰り返します。
JS（jQuery）コード：
次のようにコードをコピーします：functionscrolltxt（）{
var Controls = {}、
値= {}、
T1 = 200、 /*アニメーションを再生する時間* /
T2 = 2000、 /*再生時間間隔* /
si;
controls.rollwrap = $（ "＃roll-wrap"）;
controls.rollwrapul = controls.rollwrap.children（）;
controls.rollwraplis = controls.rollwrapul.children（）;
values.linums = controls.rollwraplis.length;
value.liheight = controls.rollwraplis.eq（0）.height（）;
values.ulheight = controls.rollwrap.height（）;
this.init = function（）{
autoplay（）;
pauseplay（）;
}
/*スクロール*/
function play（）{
controls.rollwrapul.animate（{"marvis-top"： " - "+values.liheight}、t1、function（）{
$（this）.css（ "margin-top"、 "0"）。子供（）。eq（0）.appendto（$（this））;
}）;
}
/*自動スクロール*/
function autoplay（）{
/ *すべてのLIタグの高さと高さが.roll-rapの高さよりも大きい場合 */
if（values.liheight*values.linums> values.ulheight）{
si = setInterval（function（）{
遊ぶ（）;
}、t2）;
}
}
/*マウスがulで通過するときにスクロールするのは一時停止します*/
function pauseplay（）{
controls.rollwrapul.on（{
"mouseenter"：function（）{
ClearInterval（si）;
}、
「mouseleave」：function（）{
autoplay（）;
}
}）;
}
}
new Scrolltxt（）。init（）;
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。