コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > マーキータグのスクロール効果を完成させるコードの詳細な説明

マーキータグのスクロール効果を完成させるコードの詳細な説明

巴扎黑
リリース： 2017-05-22 10:38:14
オリジナル
1828 人が閲覧しました

次のエディターは、HTML タグのマーキーを使用してスクロール効果を実現する簡単な方法を提供します (必読)。編集者はこれがとても良いと思ったので、参考として共有します。エディターと一緒に見に来てください。皆さんのゲームの成功を祈っています

ページの自動スクロール効果は JavaScript によって実現できますが、今日偶然 という HTML タグを発見しました。 JS コントロールなしでさまざまなスクロール効果を実現できます。

マーキー マーカーを使用して、テキストだけでなく、画像、表なども移動します。

構文: ...; 説明: マーカー間にスクロールするコンテンツを追加します。

重要な属性:

1. スクロール方向 (上、下、左、右の 4 つの値を含む)

構文: ...< marquee>

2. スクロール モードの動作 (スクロール: 循環スクロール、デフォルト効果、スライド: 1 回だけスクロールして停止、代替: 交互に前後にスクロール)

構文: 。 ..

3. スクロール速度scrollamount (スクロール速度は、スクロールするたびに移動する長さをピクセル単位で設定します)

構文: ...< ;/marquee>

4. スクロール遅延スクロール遅延 (スクロール時間間隔をミリ秒単位で設定します)

構文: ...

5.デフォルト値は -1 で、スクロールはループし続けます)

構文: ...

6. スクロール範囲の幅、高さ

7. bgcolor

8. ホワイトスペース HSPACE、VSPACE

コード例:

xml コード 内容をクリップボードにコピーします 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
</head>  
  
<body>  
<p>  
<marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="1000" height="50" bgcolor="#0099FF" hspace="10" vspace="10">
    ログイン後にコピー
    E

  2. はマーキー配置メソッド全体を指します; ( 2) 動作: スクロール方法を設定します。 スクロール: 一方の端からもう一方の端までスクロールすることを意味します。欠点は、シームレスにスクロールできないことです。 slide: 繰り返さずに端から端までスクロールすることを意味します...

  3. marquee>

  4. p>

  5. body>

  6. html>

【関連おすすめ】

1.

html 無料ビデオチュートリアル

2

nodejs で HTML を解析する方法を教えます

3. HTML と CSS の知識ポイントの超包括的な概要を共有します

4. Html5 データリスト タグとバックグラウンド データとの動的マッチングについて詳しく説明します

5. 非同期ファイルアップロードを完了するための HTML JQuery コード例

以上がマーキータグのスクロール効果を完成させるコードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
html marquee ラベル
ソース：php.cn
前の記事：HTMLにリンクを挿入する方法を紹介します。 次の記事：HTTP ヘッダーの知識ポイントの図による説明
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...
から 2024-04-16 09:34:16
0
0
4687
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド 次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...
から 2024-04-06 17:40:41
0
2
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート