html设置滚动文字

1、 HTML标签标签滚动文字标签滚动文字标签上节回顾上节回顾图像和多媒体的综合使用图像和多媒体的综合使用图像标签属性的熟练使用图像标签属性的熟练使用19.2 滚动文字滚动文字(本节内容本节内容)19.2.1 添加滚动文字添加滚动文字marquee19.2.2 滚动文字背景颜色滚动文字背景颜色bgcolor19.2.3 设置滚动方向设置滚动方向direction19.2.4 设置滚动方式设置滚动方式behavior19.2.5 设置滚动速度设置滚动速度scrollamount19.2.6 设置滚动延迟设置滚动延迟scrolldelay19.2.7 设置滚动范围设置滚动范围width/height1

2、9.2.8 设置滚动空白空间设置滚动空白空间hspace/vspace19.2.9 设置滚动循环设置滚动循环loop19.2.1 添加滚动文字添加滚动文字marquee 基本语法基本语法 滚动文字滚动文字19.2.1 添加滚动文字添加滚动文字marquee 语法说明语法说明 将要添加滚动效果的文字放到标记之间，同时也可以设置文字的字体、大小和颜色。19.2.1 添加滚动文字添加滚动文字marquee 实例代码19.2.1 添加滚动文字添加滚动文字marquee 网页效果19.2.1 添加滚动文字添加滚动文字marquee 效果说明 图19-12中的滚动文字字体为隶书，字号为5像素，同时滚动方式

3、是由浏览器的右边向左边滚动。19.2.2 滚动文字背景颜色滚动文字背景颜色bgcolor 基本语法基本语法 滚滚动文字动文字19.2.2 滚动文字背景颜色滚动文字背景颜色bgcolor 语法说明语法说明 文字背景颜色使用十六进制颜色代码。19.2.2 滚动文字背景颜色滚动文字背景颜色bgcolor 实例代码19.2.2 滚动文字背景颜色滚动文字背景颜色bgcolor 网页效果网页效果19.2.2 滚动文字背景颜色滚动文字背景颜色bgcolor 效果说明效果说明 在图19-13中，滚动文字的背景颜色设置为淡蓝色，其中背景颜色要覆盖整个滚动文字会滚动过的区域，所以看上去是和文字相等宽度的颜色带。1

4、9.2.3 设置滚动方向设置滚动方向direction 基本语法基本语法 滚动文字滚动文字19.2.3 设置滚动方向设置滚动方向direction 语法说明语法说明19.2.3 设置滚动方向设置滚动方向direction 实例代码实例代码19.2.3 设置滚动方向设置滚动方向direction 网页效果网页效果19.2.3 设置滚动方向设置滚动方向direction 效果说明效果说明 图19-14和图19-15都是实例代码19-2-3.html运行的结果，只不过图截取的运行阶段不同。但是，通过两个图的对比，很明显可以看出滚动的文字是在向上滚动。19.2.4 设置滚动方式设置滚动方式behavi

5、or 基本语法基本语法 滚动文滚动文字字19.2.4 设置滚动方式设置滚动方式behavior 语法说明语法说明19.2.4 设置滚动方式设置滚动方式behavior 实例代码19.2.4 设置滚动方式设置滚动方式behavior 接上页接上页19.2.4 设置滚动方式设置滚动方式behavior 网页效果网页效果19.2.4 设置滚动方式设置滚动方式behavior 效果说明效果说明 图19-16、图19-17和图19-18三幅图都是在文字滚动过程中捕捉到的效果，其中图19-16是滚动一开始的效果，三组文字虽然滚动方式不一样，但是都在向左滚动；到了图19-17时，第一组文字滚动一次完成，停止

6、在浏览器左边，而第二组文字则开始转向右边滚动，第三组文字还在继续向左边滚动；图19-18时，第一组文字依然停止不动，第二和第三组文字则一起在向左滚动。19.2.5 设置滚动速度设置滚动速度scrollamount 基本语法基本语法 滚动滚动文字文字19.2.5 设置滚动速度设置滚动速度scrollamount 实例代码实例代码19.2.5 设置滚动速度设置滚动速度scrollamount 接上页接上页19.2.5 设置滚动速度设置滚动速度scrollamount 网页效果网页效果19.2.5 设置滚动速度设置滚动速度scrollamount 效果说明效果说明 图19-19中很像哥弟三个在赛跑，

7、大哥速度为每步20像素，二哥的速度为每步10像素，三弟的速度为每步5像素。比赛刚开始几步，老大就喊“我是最快的”，老二有压力了也忙说“我是三个中的第二名”，小三比较乖，只好抱歉说“不好意思”。19.2.6 设置滚动延迟设置滚动延迟scrolldelay 基本语法基本语法 滚动文字滚动文字19.2.6 设置滚动延迟设置滚动延迟scrolldelay 语法说明语法说明 延迟时间是以毫秒为单位的，毫秒就是千分之一秒。这个延迟时间设置得越小，滚动得越快，延迟时间设置得如果过大，还会出现走走歇歇的效果。19.2.6 设置滚动延迟设置滚动延迟scrolldelay 实例代码实例代码19.2.6 设置滚动延

8、迟设置滚动延迟scrolldelay 接上页接上页19.2.6 设置滚动延迟设置滚动延迟scrolldelay 网页效果网页效果19.2.6 设置滚动延迟设置滚动延迟scrolldelay 效果说明效果说明 从图19-20的文字内容就可以理解，延迟时间设置的越小，其滚动文字的速度则相对越快，没有停顿；而延迟时间设置的越大，就是走走歇歇的感觉。而且在实际应用过程中，延迟时间和滚动速度要一起设置，这样效果会更加明显。19.2.7 设置滚动范围设置滚动范围width/height 基本语法基本语法 滚动文字滚动文字19.2.7 设置滚动范围设置滚动范围width/height 实例代码实例代码19.

9、2.7 设置滚动范围设置滚动范围width/height 语法说明语法说明 滚动文字滚动文字19.2.7 设置滚动范围设置滚动范围width/height 接上页接上页19.2.7 设置滚动范围设置滚动范围width/height 网页效果网页效果19.2.7 设置滚动范围设置滚动范围width/height 效果说明效果说明 图19-21中，很明显可以看出两个背景范围的宽度和高度都是不同的，而滚动文字也只能在这两个范围内滚动。19.2.8 设置滚动空白空间设置滚动空白空间hspace/vspace 基本语法基本语法 滚动文字滚动文字19.2.8 设置滚动空白空间设置滚动空白空间hspace/

10、vspace 语法说明语法说明 水平范围和垂直范围也是用数字表示，单位均为像素。19.2.8 设置滚动空白空间设置滚动空白空间hspace/vspace 实例代码实例代码19.2.8 设置滚动空白空间设置滚动空白空间hspace/vspace 接上页接上页19.2.8 设置滚动空白空间设置滚动空白空间hspace/vspace 网页效果网页效果 19.2.8 设置滚动空白空间设置滚动空白空间hspace/vspace 效果说明效果说明 图19-22中，为了使滚动文字空白空间更明显，所以将滚动文字都放到了水平线内。水平线和滚动文字背景之间的空白为垂直空白空间，滚动文字背景和浏览器边框之间空白为水平空白空间。19.2.9 设置滚动循环设置滚动循环loop 基本语法基本语法 滚动文字滚动文字19.2.9 设置滚动循环设置滚动循环loop 语法说明语法说明 循环次数直接