教你用十行代码实现网页标题滚动效果

蔚落 2023-10-06 14:34 1阅读 0赞

每天进步一点点，首先点开下面的gif图，看一看效果

![format_png][]

怎么样才能实现网页标题滚动效果呢？时间就是金钱，废话不多说，直接上代码：

var keyWords = "我想变成一棵树,开心时在秋天开花，伤心时在春天落叶！";
    function titleChange() {
    	var keyList = keyWords.split("");
    	var firstChar = keyList.shift();
    	keyList.push(firstChar);
    	keyWords = keyList.join("");
    	document.title = keyWords;
    }
    setInterval(titleChange, 500);

数一数确实不到十行哈哈哈哈，给自己点赞。

![format_png 1][]

点了一个蚊香赞

然后解释一下每一行的意思吧：

首先创建了一个变量 `keyWords`，用来存放网页标题滚动的文字（字符串）

接着创建一个命名函数 `titleChange` 执行以下操作；

1. 用`split()`方法（不改变原始字符串）将滚动的文字拆分为单个字符的数组`keyList`；

![format_png 2][]

打印 keyList 结果

2. 用`shift()`方法移出位于数组 `keyList` 头部的元素，并用变量 `firstChar` 存储；

3. 用`push()`方法将步骤2中移除的字符，重新放到数组 `keyList` 的尾部；

4. 用`join()` 方法将数组重新拼接为字符串，替换原本 `keyWords` 中存储的文本(字符串)；

5. 用 `document.title` 将步骤4中重新拼接的字符串，重新赋值到网页标题中；

这样就将 `keyWords` 中原本的第一个字符移动至最后一位

网页标题中原本位于第一个字符之后的文本会批量前移

实现文本向前滚动的效果，但是由于函数每次调用只会执行一次

所以最后我们还需要创建一个计时器，每个500毫秒重新调用一次 `titleChange` 函数

最终实现网页标题循环滚动的效果了

我们还可以看一看控制台打印的 `keyWords`

啊呀！我感觉做了一个洗剪吹门口的霓虹灯呀 。。。

![format_png 3][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS92Mi00YjRmODMxMWM1MGI4NjYyODkwZTgwZWM4NTNhZGIwNF9iLndlYnA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMzLnpoaW1nLmNvbS84MC92Mi0wNzNlNGVmYmJkZTJlZjJhOWFjZmEzYTliZThiNmRmN183MjB3LmpwZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWNiLnpoaW1nLmNvbS84MC92Mi0xODcxZGM5MDY3MjViZjZlM2IzZjVhZGVjY2I0ZTI4Nl83MjB3LmpwZw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS92Mi1lMGQ3MGJkMGY1NGVlNDEwOWQyOWFmYjQwNTU3YjcwZF9iLndlYnA?x-oss-process=image/format,png