ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML タグのマーキーに基づいてスクロール効果を実現する簡単な方法

HTML タグのマーキーに基づいてスクロール効果を実現する簡単な方法

黄舟オリジナル: 2017-03-17 15:08:402024ブラウズ

ページの自動スクロール効果はJavaScriptで実現できますが、今日偶然HTMLタグを発見しました - ed126914ed1419bab26abf7cf307b7b97204e33a7a23f6efcc788532e245c31b JS コントロールを使用せずに、さまざまなスクロール効果を実現できます。

marqueeマークを使用すると、テキストだけでなく、画像、表なども移動できます。

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

重要な属性:

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

構文: d4e49ca334fe8f3efe6a583e5623e421...8fc892b7857fd702ca0825589d793beb。 7204e33a7a23f6efcc788532e245c31b

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

構文: 0bbfb4b02c83fcb8fd86490c1b9a69ab..< ;/marquee>

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

構文: 1575f7128b12e554baf1659de88136e7...7204e33a7a23f6efcc788532e245c31b

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

構文: 69457943bcb520c612032510d36031b7...7204e33a7a23f6efcc788532e245c31b

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

7 . スクロールの背景色 bgcolor

8. 空白スペース hspace、vspace

コード例:

<!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">   
指整个Marquee对齐方式; (2)behavior:设置滚动的方式: scroll:表示由一端滚动到另一端,会重复,缺陷是不能无缝滚动。 slide:表示由一段滚动到另一端,不会重复...    
</marquee>   
</p>   
</body>   
</html>

上記は、スクロール効果を実現するためにエディターが提供した HTML タグのマーキーの簡単な方法 (必見) です。みなさん、気に入っていただければ幸いです~

HTMLのマーキー属性分析

マーキーの詳細な使用分析

HTMLのマーキー属性を上手に使って踊るテキストを実現

声明：

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

前の記事：入力テキストボックスの入力実装属性を無効にする次の記事：入力テキストボックスの入力実装属性を無効にする

続きを見る

HTML タグのマーキーに基づいてスクロール効果を実現する簡単な方法

関連記事