跑马灯的滚动原理以及三种常见的滚动

走马灯效果其实就是利用＜marquee＞标签进行图片和文字滚动，设置的样式不一样，滚动的效果就不一样，实现“走马观花”的效果。

一、滚动方式1． 普通滚动＜！doctype html＞＜html lang＝＂en＂＞＜head＞    ＜meta charset＝＂UTF－8＂＞    ＜title＞document＜／title＞
   ＜／body＞  ＜marquee＞这里是您要填的内容＜／marquee＞＜／html＞

1．1  文字碰到左边就会停止

＜marquee behavior＝＂slide＂＞这里是您要填的内容＜／marquee＞

1．2  文字碰到右边就会停止

＜marquee behavior＝＂slide＂ direction＝＂right＂＞这里是您要填的内容＜／marquee＞

2．图片滚动
       2．1  预设滚动

图片滚动到右边界，自动再从左边滚动。

＜marquee behavior＝＂scroll＂＞＜img src＝＂img／border．png＂＞＜／marquee＞

2．2 来回滚动＜marquee behavior＝＂alternate＂＞＜img src＝＂img／border．png＂＞＜／marquee＞

2．3 滚动的方向

向左滚动

＜marquee direction＝＂left＂＞＜img src＝＂img／border．png＂＞＜／marquee＞

向右滚动

＜marquee direction＝＂right＂＞＜img src＝＂img／border．png＂＞＜／marquee＞

向下滚动

＜marquee direction＝＂down＂＞＜img src＝＂img／border．png＂＞＜／marquee＞

向上滚动

＜marquee direction＝＂up＂＞＜img src＝＂img／border．png＂＞＜／marquee＞

二、参数1． 设定滚动次数（可自行更改参数）＜marquee loop＝＂2＂＞这里是您要填的内容＜／marquee＞2． 设定背景颜色 （16进位颜色或文字输入）
＜marquee bgcolor＝＂＃？？？？？？＂＞这里是您要填的内容＜／marquee＞3． 设定滚动宽度

为了方便辨别，这里加上bgcolor属性。

＜！doctype html＞＜html lang＝＂en＂＞
   ＜head＞        ＜meta charset＝＂UTF－8＂＞        ＜title＞document＜／title＞
       ＜body＞        ＜div ＞            ＜p＞初始化＜／p＞            ＜marquee bgcolor＝＂red＂； ＞这里是您要填的内容＜／marquee＞        ＜／div＞        ＜div＞            ＜p＞设置高度＜／p＞            ＜marquee bgcolor＝＂aqua＂；width＝＂380＂＞这里是您要填的内容＜／marquee＞        ＜／div＞
＜／body＞＜／html＞

4． 设定滚动高度＜！doctype html＞＜html lang＝＂en＂＞
   ＜head＞        ＜meta charset＝＂UTF－8＂＞        ＜title＞document＜／title＞
       ＜body＞        ＜div ＞            ＜p＞初始化＜／p＞            ＜marquee bgcolor＝＂red＂； ＞这里是您要填的内容＜／marquee＞        ＜／div＞        ＜div＞            ＜p＞设置高度＜／p＞            ＜marquee bgcolor＝＂aqua＂； height＝＂38＂＞这里是您要填的内容＜／marquee＞        ＜／div＞
＜／body＞＜／html＞

5． 设定滚动速度 （可自行更改参数）＜marquee scrollamount＝＂30＂＞这里是您要填的内容＜／marquee＞

三、总结

本文以html为基础，主要介绍了常见的效果（跑马灯）的滚动原理，详细介绍了三种常见的滚动以及其相关属性，以及对设置参数时遇到的难题一一解答，希望能够帮助你学习。

看完本文有收获？请转发分享给更多的人

IT共享之家

往期精彩文章推荐：

Vue的学习笔记（下篇）Vue的学习笔记（中篇）Vue的学习笔记（上篇）