js_javascript スキルによって実装された水平方向の中断のないテキスト スクロール

私が最初に考えたタグは、水平スクロールを可能にするための でした。監督は先発位置が右端からだと言ってましたが、中央から出るか左端から出るように変更できるでしょうか？関連情報を確認したところ、 では開始位置を指定できないことが分かりました。その後、インターネット上で画像を使用したコードを見つけ、それをテキストに変更したところ、目的の機能を実現することができました。コードは次のとおりです:

<style type="text/css"> #gongao{width:1000px;height:30px;overflow:hidden;line-height:30px;font-size:13px;font-family:'宋体';background:#DDE5ED;color:#0C77CF;font-weight:bold;} #gongao #scroll_begin, #gongao #scroll_end{display:inline} </style> <div id="gongao"> <div style="width:900px;height:30px;margin:0 auto;white-space: nowrap;overflow:hidden;" id="scroll_div" class="scroll_div"> <div id="scroll_begin"> </div> ${afiche.content} ${afiche.content} ${afiche.content} ${afiche.content} ${afiche.content} ${afiche.content} <div id="scroll_end"> </div> </div> </div>
[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

ここ${afiche.content } はデータベースから取り出したテキストです。

この複数の繰り返しテキストがscroll_beginのdivに記述されているのは、これらのテキストの長さがscroll_divのdivコンテナよりも大きくなければならないためです。 div より小さい場合、スクロール効果はありません。 言い換えると、シームレススクロールのためのコンテンツの合計幅はコンテナの幅より大きくなければなりません。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Js でボックスをポップアップし、value_javascript を返す 2 つの一般的な方法次の記事：Js でボックスをポップアップし、value_javascript を返す 2 つの一般的な方法

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved