JavaScript のマーキー要素
ほとんどの場合、Web サイトまたは Web ページでコンテンツ テキストを装飾する必要があります。 マーキーは、コンテンツの表現を美しくする機能の 1つです。
コンテンツを上から下、下から上、左から右、右から左に自動的にスクロールする必要がある場合は、通常、ソース コードでマーキーを使用します。 この記事では、マーキーを実装するための HTML デフォルト タグと JavaScript カスタム コードについて学習します。
HTML でマーキー タグを使用する
HTML には、Web コンテンツを自動スクロールするマーキー タグがあります。 デフォルトでは、コンテンツは右から左にスクロールしますが、direction="up" のようにスクロール方向 (上、下、右、左) をカスタマイズできますが、このタグは HTML 5 で廃止されました。
コード例:
<html>
<head>
<title>Example for HTML Marquee Tag</title>
</head>
<h1>
Delft stack marquee tag example
</h1>
<marquee width="40%" direction="up" height="30%">
Delft stack is a best website to learn programming skills!
</marquee>
</html>
上記の HTML ソース コードでは、テキスト コンテンツにデフォルトの HTML マーキー タグを使用しました。 方向を上にカスタマイズし、高さと幅をインライン CSS で定義しました。
JavaScript を使用してマーキー機能を追加する
カスタム関数の助けを借りて、JavaScript と J-Query を使用してマーキー機能を Web コンテンツに追加できます。 高さと幅の位置を使用して、コンテンツを目的の方向にスクロールできます。
アニメーション化およびスクロールしたいコンテンツの ID を定義し、それらの ID をマーキーのカスタム関数に渡します。
コード例:
<html>
<head>
<title>Example for JavaScript Marquee</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<style>
#text{
cursor:pointer;
overflow:hidden;
position:absolute;
left:10px;
margin-right:10px;
top:10px;
}
</style>
<script>
function marquee(a, b) {
var width = b.width();
var start_pos = a.width();
var end_pos = -width;
function scroll() {
if (b.position().left <= -width) {
b.css('left', start_pos);
scroll();
}
else {
time = (parseInt(b.position().left, 10) - end_pos) *
(10000 / (start_pos - end_pos)); //we can increase or decrease speed by changing value 10000
b.animate({
'left': -width
}, time, 'linear', function() {
scroll();
});
}
}
b.css({
'width': width,
'left': start_pos
});
scroll(a, b);
}
$(document).ready(function() {
marquee($('#display'), $('#text')); //we need to add name of container element & marquee element
});
</script>
<h1 id="text" >
Delft stack is a best website to learn programming skills!
</h1>
</html>
上記のソース コードで J-Query Google CDN を使用して、J-Query 関数を使用しました。 HTML ページ ソースの head 内に J-Query Google CDN リンクを含めます。
カスタム マーキー関数を宣言しました。 高さ、幅の位置と CSS を使用してコンテンツをアニメーション化およびスクロールするのに役立ちます。
H1 タグを使用してテキスト コンテンツを表示し、その HTML 要素に ID を定義しました。 (document).ready() 内で、要素 ID を引数として取り、その特定の HTML 要素をアニメーション化するマーキー関数を渡しました。