JavaScript 自定义滚动效果实现

"s2javascript小小技巧" 在JavaScript中，虽然`<marquee>`元素主要与HTML相关，但它在网页动态效果中常常与JavaScript结合使用，以实现更复杂的行为控制。`<marquee>`是一个非标准但广泛支持的HTML标签，用于创建滚动或滑动文本或图像的效果。在描述中提到的手写代码可能包含了对`<marquee>`元素的一些自定义扩展，以增强其功能。 以下是关于`<marquee>`标签的一些关键属性和它们的作用： 1. **direction**: 这个属性定义了内容滚动的方向。它可以设置为`left`（向左滚动）、`right`（向右滚动）、`down`（向下滚动）或`up`（向上滚动）。例如： ```html <marquee direction="left">这是向左滚动的内容</marquee> ``` 2. **behavior**: 这个属性控制滚动的方式。它可以是`scroll`（连续滚动）、`slide`（只滚动一次）或`alternate`（来回交替滚动）。例如： ```html <marquee behavior="scroll">这是连续滚动的内容</marquee> <marquee behavior="slide">这是只滚动一次的内容</marquee> <marquee behavior="alternate">这是来回交替滚动的内容</marquee> ``` 3. **loop**: 这个属性指定了滚动的次数。如果设置为一个正整数，内容将循环滚动指定次数；如果设置为`infinite`，则会无限循环。例如： ```html <marquee loop=3>内容将滚动三次</marquee> <marquee loop=infinite>内容将无限循环滚动</marquee> ``` 4. **scrollamount**: 这个属性设置了每帧移动的距离，以像素为单位。较大的值会使滚动速度更快。例如： ```html <marquee scrollamount=20>内容将以较快的速度滚动</marquee> ``` 5. **scrolldelay**: 这个属性定义了两次滚动之间的时间间隔，以毫秒为单位。较大的值会使滚动间隔更长。例如： ```html <marquee scrolldelay=500 scrollamount=100>内容将以较慢的速度滚动，且每次滚动之间有500毫秒的延迟</marquee> ``` 6. **align**: 这个属性在HTML4中使用，用于定义marquee元素的对齐方式。它可以是`top`、`middle`或`bottom`。在HTML5中，这个属性已被废弃，通常使用CSS来代替。例如： ```html <marquee align="top" width=400>内容将顶部对齐</marquee> ``` 此外，`<marquee>`元素还可以与其他HTML属性结合使用，如`bgcolor`用于设置背景颜色。`bgcolor`接受两种形式的值：`#rrggbb`表示十六进制颜色代码，或者直接使用预定义的颜色名称。例如： ```html <marquee bgcolor="#aaaaee">背景色为淡紫色的内容</marquee> ``` 要注意的是，尽管`<marquee>`在一些场景下仍然有用，但由于它不是W3C标准的一部分，现代Web开发更倾向于使用CSS动画或JavaScript库来实现类似的效果，以获得更好的浏览器兼容性和控制性。然而，在一些旧的项目或简单的滚动需求中，`<marquee>`仍然是一个快速实现动态效果的工具。