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

淩亂°似流年 2022-12-01 01:17 163阅读 0赞

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

![format_png][]

![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]: /images/20221123/2514f224ee114e93be042ed26060ac85.png
[format_png 1]: /images/20221123/94e79e4956b64168a6ed3c9b4b43dbbc.png
[format_png 2]: /images/20221123/fea1c6ee4bc24d4eb9d9653094151fab.png
[format_png 3]: /images/20221123/ef8aff2cad744dce923f183b82f5509f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关网页标题滚动显示

欢迎访问我的博客地址 : [博客地址][Link 1] **网页文字标题滚动显示** <!DOCTYPE html> <html><head> ...

怼烎@/ 2024年04月18日 16:12/ 0 赞/ 84 阅读

相关教你用HTML+CSS实现百叶窗动画效果

![在这里插入图片描述][d39f32e8ffd748e69b5f3c06a972cfd5.jpeg_pic_center] `推荐学习专栏：` [【JavaWeb】

柔光的暖阳◎/ 2024年04月01日 19:31/ 0 赞/ 119 阅读

相关行代码实现镂空效果

镂空效果是一种常见的图形处理效果，可以使图像中的某个部分呈现透明或无色的效果，从而显示出底层元素或背景。在编程中，我们可以使用不同的技术来实现镂空效果，其中一种常见的方法是使用

川长思鸟来/ 2024年03月02日 09:00/ 0 赞/ 57 阅读

相关如何用一行代码实现网页变灰效果？

2020年4月4日清明节。我们发现好多网站全部变成黑白的啦。我开始想难道是把页面所有的图片样式什么的修改一下替换吗？那工程量有点大吧？结果今天看到一篇文章介绍到了。我就总结一下

蔚落/ 2023年07月23日 13:56/ 0 赞/ 32 阅读

相关一行代码带你实现网页变灰效果

2020年4月4日，星期六，清明节。我们的国家经历了非常惨痛的时刻，很多英雄在救助他人的路上倒下，更有很多烈士英雄保卫人民的安危遇难，今天全国下降半旗，北京时间 10 点

谁借莪１个温暖的怀抱￠/ 2023年07月22日 11:30/ 0 赞/ 171 阅读

相关如何用一行代码实现网页变灰效果？

![format_png][] 转自进击的Coder，作者崔庆才今天是 2020 年 4 月 4 日，星期六，清明节。我们的国家经历了非常惨痛的时刻，很多英雄在救助他

绝地灬酷狼/ 2023年07月22日 09:05/ 0 赞/ 19 阅读

相关 table禁止标题行随数据行滚动的简单实现

在工作中,总是会遇到列表展示,在列表展示时,会要求标题行不动,其余数据行滚动情况.如果有框架,那么使用框架是最简单的. 那么不使用框架时,怎么办呢?那就是抄框架的底层实现.

╰半夏微凉°/ 2023年02月13日 14:40/ 0 赞/ 2 阅读

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

每天进步一点点，首先点开下面的gif图，看一看效果 ![format_png][] ![format_png][] 怎么样才能实现网页标题滚动效果呢？时间就是金钱，废话不

淩亂°似流年/ 2022年12月01日 01:17/ 0 赞/ 164 阅读

相关 js实现网页标题不断改变效果

以前就发现过有的网页标题是不断改变的，但是一直都不知是怎么实现的，今天无意间找到了跟大家分享一下。 <html> <head> <

冷不防/ 2022年08月25日 15:39/ 0 赞/ 151 阅读

相关教你如何用网页开发APP

用到的工具： HBuilderX app开发版 1.首先你得网站必须是上线的，然后明确这一点后，点击打开HBuilderX。在文件里找到新建项目，选择wap2Ap

た入场券/ 2021年09月18日 23:26/ 0 赞/ 485 阅读