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

淩亂°似流年 2022-12-01 01:17 159阅读 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 条评论，159人围观）

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

相关阅读

相关网页标题滚动显示

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

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

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

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

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

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

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

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

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

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

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

相关个性化jquery代码让你的标题栏滚动起来

现在的浏览器都采用的[多标签模式][Link 1]，如果网站的标题很长很长，在浏览器标签栏是看不全的，为了更个性化，我们可以使用下面这段[个性化jquery代码][Link 1

旧城等待，/ 2023年01月18日 13:27/ 0 赞/ 5 阅读

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

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

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

相关网页设计html轮播代码,20行js代码实现网页轮播图效果

20行js代码实现网页轮播图效果(2020年12月11日) 制作背景大二上学期临近期末，网页课上讲到了js制作轮播图，对课上的js代码进行了适当简化和调整。效果图

缺乏、安全感/ 2022年10月06日 09:55/ 0 赞/ 212 阅读

相关 html5+实现上下滚动效果代码,HTML5实现直播间评论滚动效果的代码

![cc31dac761c50fca9ef36904a43a5e24.gif][] 直播间评论滚动效果，下划查看历史消息并停止滚动，如有新消息会出现新消息提醒，点击滚动到底部

秒速五厘米/ 2022年10月06日 05:56/ 0 赞/ 257 阅读

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

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

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

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

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

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