html5实现滚动文字

来源：互联网发布：linux 局域网传文件编辑：程序博客网时间：2024/06/09 18:09

滚动文字可以用javascript实现，今天我们用html5的滚动文字标签：marquee实现。只要在标签之间写要进行滚动的文字即可，而且可以设置这些文字的样式。默认从浏览器的右方缓缓向左滚动（循环）。

先看示例代码：

<!DOCTYPE html><html>    <head>   <meta http-equiv="Content-type" content=:text/html;charset=utf-8"/>   <title>设置滚动文件</title>   </head>   <body>        <marquee direction="left" behavior="alternate" scrollamount="100" scrolldelay="1000" loop="3" width="1000"     height="200"  bgcolor="red"            hspace="100" vspace="200">           <font face="隶书" color="#AAAAAA" size="5">Hello，HTML5!</font>       </marquee>  </body></html>

接下来我来细说该标签的属性。
1.滚动方向属性 direction
该属性的滚动方向可以设置四个值:up（文字向上）、down（文字向下）、left（文字向左）、right（文字向右）。
2.滚动方式属性 behavior
该属性的取值有三个值：scroll（循环滚动，默认效果）、slide(只滚动一次就停止)、alternate(来回交替进行滚动)
3.滚动速度属性 scrollamount
该属性能调整文字滚动的速度，滚动文字的速度实际上是通过设置滚动文字每次移动的长度来实现的，以像素为单位。值只写数字，不带px单位，若带了单位则设置无效。
4.滚动延迟属性 scrolldelay
该属性用来设置滚动文字滚动的时间间隔（滚动两步之间的时间间隔）。
scrolldelay的时间间隔单位是毫秒，取值只写数字
5.滚动循环属性 loop
设置滚动文字后，默认会无限循环下去，若想控制循环的次数，可设置此属性。
6.滚动范围属性 width&height
若想控制文字滚动的范围，则可起用这二属性，以像素为单位，不写px单位。默认情况下left和right滚动的width和浏览器窗口同宽，搞定和文字高度同高。up和down时height为浏览器窗口高度的三分之一。
7.滚动背景颜色属性 bgcolor
此属性为滚动区域设置背景色(取值为十六进制颜色码和英文)。
8.滚动空间属性 hspace&vspace
hsapce属性可以设置滚动范围的水平位置，vspace用来设置滚动范围的垂直位置。单位均为像素，写值时不写单位px。

1 1