JavaScriptを使用してテキストスクロールを実装する方法
JavaScript でテキスト スクロールを実装する方法: 1. HTML サンプル ファイルを作成します; 2. スクリプト タグを追加します; 3. "$(".txtBox").addClass("txtBox_4") を通じて縦書きテキストを実装します。 」 配置してスクロールするか、テキストを横に配置してスクロールするように設定するだけです。
この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
JavaScript を使用してテキストのスクロールを実現するにはどうすればよいですか?
テキストスクロール効果を実現するための js
## 小さな前よく使われるjsアニメーション効果はエディターで紹介しましたが、ここではあまり使われないかもしれないアニメーション効果を紹介します。このアニメーション効果はテキストに関連しており、一般的には使用されませんが、ほとんどの人が見たことがあります。 誰もが音楽を検索したり聴いたりするために Kugou Music や NetEase Cloud Music を使用していると思いますが、しばらくすると、歌詞ページで歌詞がスクロールする効果が確実に表示されるようになります。このアニメーション効果も同様ですが、これらの音楽の歌詞効果とは少し異なり、テキストの縦方向の配置やスクロールの効果が追加されています。 ( 1)書き込みモード: 水平-tb | 垂直-rl | 垂直-lr | lr-tb | tb-rl
(2) 互換性のある書き込み: -webkit-writing-mode: 水平-tb | 垂直-rl | 垂直 -lr | lr-tb | tb-rl
(注: lr-tb と tb-rl は IE では互換性がありません)
デフォルト値: 通常
適用対象: table-row-group、table - All を除く列グループ、表行、表列を除く要素
継承: あり
アニメーション: いいえ
計算値: 特定の値
(1)horizontal-tb: 水平方向のトップダウン記述方式。つまり、left-right-top-bottom (IE のプライベート値 lr-tb と同様)
(2)vertical-rl: 右から左への縦書き。つまり、top-bottom-right-left (IE のプライベート値 tb-rl と同様)
(3)vertical-lr: 左から右への縦書き。つまり、上-下-左-右
(4) lr-tb: 左-右、上-下。オブジェクトのコンテンツは左から右に水平に流れ、次の行が前の行の下になります。すべてのグリフは垂直かつ上向きです。このレイアウトはローマ字言語 (IE)
(5) tb-rl: 上-下、右-左で使用されます。オブジェクト内のコンテンツは、上から下、右から左に垂直に流れます。次の垂直行は、前の垂直行の左側にあります。全角文字は (6) 真上に向けられ、欧文やカタカナなどの半角文字は時計回りに 90 度回転されます。このレイアウトは東アジア言語で一般的に使用されます (IE)
<body style="font-size: 12px;" >
<section class="topBox">
<p class="topBoxTxt">
<ul class="txtBox" id="txtBox">
</ul>
</p>
</section>
<script type="text/javascript" src="index.js" ></script>
<script>
(function(win){
//文字水平排列滚动
// hor();
// horizontal(0);
//文字垂直排列滚动
$(".txtBox").addClass("txtBox_4");
ver();
vertical(0); //移动端适配
var doc = win.document; var docEl = doc.documentElement; var tid; function refreshRem() {
var width = docEl.getBoundingClientRect().width if (width > 768) {
width = 768;
} var rem = width / 7.5;
docEl.style.fontSize = rem + 'px';
docEl.style.fontSize = rem + 'px';
docEl.style.fontSize = rem + 'px';
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
refreshRem();
})(window); </script></body>body,html{ width:100%; height:100%; position: relative; background: #232226; overflow-y: auto; overflow-x: hidden;}.topBox,.topBoxTxt{ width:100%; height:auto; position: relative;}.topBoxTxt{ text-align: center; height:auto;;
color:#fff; font-size: 0.36rem; padding-top:55px;}.txtBox{ width: 5.6rem; height: 5.2rem; margin:0 auto; overflow-y: scroll;}
.txtBox>li{ opacity: 0.5; height:0.74rem;}
.txtBox>li:first-child{ padding-top:60px; }.txtBox>li.hotColor{ opacity: 1;}.txtBox_4{ width:4.6rem; height: 7.5rem; overflow-x: auto; white-space: nowrap; display: block;}.txtBox_4>li{ writing-mode:tb-rl; writing-mode:vertical-rl; -webkit-writing-mode: vertical-rl; height: 0; line-height: 0.75rem; word-wrap:break-word;}.txtBox_4>li{ width:0.4rem; text-align: center; margin:0 0.1rem; display: inline-table; position: relative;}var freq=10;//滚动频率var fraction=9/10;// 水平文字高亮显示行在歌词显示区域中的固定位置百分比var frac=3/10;// 垂直文字高亮显示行在歌词显示区域中的固定位置百分比 var timer=true;//定时器var num=-1;//当前行下标var time;//滚动距离var eul = document.getElementById("txtBox");var lis=[
{"offset":3000, "text":"我总是轻描淡写告诉你我的愿望"},
{"offset":6000, "text":"也给你千言万语都说不尽的目光"},
{"offset":9000, "text":"这世界总有人在忙忙碌碌寻宝藏"},
{"offset":12000, "text":"却误了浮世骄阳也错过人间万象"},
{"offset":15000, "text":"古城里长桥上"},
{"offset":18000, "text":"人如海车成行"},
{"offset":21000, "text":"你笑得像光芒"},
{"offset":24000, "text":"蓦然把我照亮"},
{"offset":27000, "text":"风轻扬夏未央"},
{"offset":30000, "text":"林荫路单车响"},
{"offset":33000, "text":"原来所谓爱情"},
{"offset":36000, "text":"是这模样"},
{"offset":39000, "text":""}
]var count=lis.length%7+5;//文字水平排列滚动function hor(){
for (var i = 0; i <lis.length; i++) { var eli = document.createElement("li");
eli.innerText = lis[i].text;
eul.appendChild(eli);
} for(var j=0;j<count;j++){ var eli = document.createElement("li");
eli.innerText ="";
eul.appendChild(eli);
}
}function horizontal(lineno){
common(lineno,horizontal); var scrollTop; var ep = eul.children[lineno]; if(30<ep.offsetTop<eul.clientHeight*fraction){
scrollTop=ep.offsetTop;
}else if(ep.offsetTop>(eul.scrollHeight-eul.clientHeight*(1-fraction))){
scrollTop=eul.scrollHeight-eul.clientHeight;
}else{
scrollTop=ep.offsetTop=eul.clientHeight*fraction;
} // 如用户拖动滚动条导致当前显示行超出显示区域范围，下一行直接定位到当前显示行
if (eul.scrollTop > (scrollTop + eul.clientHeight*fraction)|| (eul.scrollTop + eul.clientHeight*fraction) < scrollTop){
eul.scrollTop = scrollTop;
}else {
var step = Math.ceil(Math.abs(eul.scrollTop - scrollTop)/(time/freq));
scrollT(eul.scrollTop, scrollTop, step);
}
}function scrollT(crt, dst, step){
if(Math.abs(crt - dst) < step){ return;
} if(crt < dst){
eul.scrollTop += step;
crt += step;
} else {
eul.scrollTop -= step;
crt -= step;
}
setTimeout(scrollT.bind(this, crt, dst, step), freq);
};//文字垂直排列滚动function ver(){
console.log(eul) for (var i = 0; i <lis.length; i++) { var eli = document.createElement("li");
eli.innerHTML = lis[i].text;
eul.appendChild(eli); if(eli.innerText.length<15){
eli.style.marginBottom=(15-eli.innerText.length)+"em";
}
} for(var j=0;j<count;j++){ var eli = document.createElement("li");
eli.innerText ="";
eul.appendChild(eli);
}
}function vertical(lineno){
common(lineno,vertical); var scrollLeft; var ep = eul.children[lineno]; if (ep.offsetLeft < eul.clientWidth*frac){
scrollLeft = 0;
} else if (ep.offsetLeft > (eul.scrollWidth - eul.clientWidth*(1-frac))){
scrollLeft = eul.scrollWidth - eul.clientWidth;
} else {
scrollLeft = ep.offsetLeft - eul.clientWidth*frac;
} // 如用户拖动滚动条导致当前显示行超出显示区域范围，下一行直接定位到当前显示行
if (eul.scrollLeft > (scrollLeft + eul.clientWidth*frac)|| (eul.scrollLeft + eul.clientWidth*frac) < scrollLeft){
eul.scrollLeft = scrollLeft;
} else {
var step = Math.ceil(Math.abs(eul.scrollLeft - scrollLeft)/(time/freq));
scrollL(eul.scrollLeft, scrollLeft, step);
}
}function scrollL(crt, dst, step){
if(Math.abs(crt - dst) < step){ return;
} if(crt < dst){
eul.scrollLeft += step;
crt += step;
} else {
eul.scrollLeft -= step;
crt -= step;
}
setTimeout(scrollL.bind(this, crt, dst, step), freq);
}function common(lineno,fn){
if (lineno ==0) {
time = lis[lineno].offset;
} else {
time = lis[lineno].offset - lis[lineno-1].offset;
}
timer = setTimeout(fn.bind(this, lineno+1), time);
num=lineno; //若滚动到最后一行，则从头开始,并把每一行文字均取消高亮
if(lineno==lis.length-1){ for(var i=0;i<(eul.children).length-1;i++){
eul.children[i].setAttribute("class", "");
}
lineno=0;
timer = setTimeout(fn.bind(this, lineno), time);
} if (lineno > 0) {
eul.children[lineno-1].setAttribute("class", "");
} var ep = eul.children[lineno];
ep.setAttribute("class", "hotColor");
}以上がJavaScriptを使用してテキストスクロールを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7530
15
1378
52
82
11
21
76
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法
Dec 17, 2023 pm 02:54 PM
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。
WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー
Dec 17, 2023 pm 05:30 PM
WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジー はじめに： インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー
JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法
Dec 17, 2023 pm 12:09 PM
JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき
WebSocketとJavaScriptを使ったオンライン予約システムの実装方法
Dec 17, 2023 am 09:39 AM
WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築
Dec 17, 2023 pm 05:13 PM
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは
JavaScriptでinsertBeforeを使用する方法
Nov 24, 2023 am 11:56 AM
使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
JavaScript と WebSocket: 効率的なリアルタイム画像処理システムの構築
Dec 17, 2023 am 08:41 AM
JavaScript は Web 開発で広く使用されているプログラミング言語であり、WebSocket はリアルタイム通信に使用されるネットワーク プロトコルです。 2 つの強力な機能を組み合わせることで、効率的なリアルタイム画像処理システムを構築できます。この記事では、JavaScript と WebSocket を使用してこのシステムを実装する方法と、具体的なコード例を紹介します。まず、リアルタイム画像処理システムの要件と目標を明確にする必要があります。リアルタイムの画像データを収集できるカメラ デバイスがあるとします。
