教你用十行代码实现网页标题滚动效果
2020-08-25 13:55
786 查看
每天进步一点点,首先点开下面的gif图,看一看效果
怎么样才能实现网页标题滚动效果呢?时间就是金钱,废话不多说,直接上代码:
[code]var keyWords = "我想变成一棵树,开心时在秋天开花,伤心时在春天落叶!"; function titleChange() { var keyList = keyWords.split(""); var firstChar = keyList.shift(); keyList.push(firstChar); keyWords = keyList.join(""); document.title = keyWords; } setInterval(titleChange, 500);
数一数确实不到十行哈哈哈哈,给自己点赞。
点了一个蚊香赞
然后解释一下每一行的意思吧:
首先创建了一个变量
keyWords,用来存放网页标题滚动的文字(字符串)
接着创建一个命名函数
titleChange执行以下操作;
1. 用
split()方法(不改变原始字符串)将滚动的文字拆分为单个字符的数组
keyList;
打印 keyList 结果
2. 用
shift()方法移出位于数组
keyList头部的元素,并用变量
firstChar存储;
3. 用
push()方法将步骤2中移除的字符,重新放到数组
keyList的尾部;
4. 用
join()方法将数组重新拼接为字符串,替换原本
keyWords中存储的文本(字符串);
5. 用
document.title将步骤4中重新拼接的字符串,重新赋值到网页标题中;
这样就将
keyWords中原本的第一个字符移动至最后一位
网页标题中原本位于第一个字符之后的文本会批量前移
实现文本向前滚动的效果,但是由于函数每次调用只会执行一次
所以最后我们还需要创建一个计时器,每个500毫秒重新调用一次
titleChange函数
最终实现网页标题循环滚动的效果了
我们还可以看一看控制台打印的
keyWords
啊呀!我感觉做了一个洗剪吹门口的霓虹灯呀 。。。
相关文章推荐
- jquery实现网页的页面平滑滚动效果代码
- 用js实现网页标题的字体滚动效果
- JS实现网页上随滚动条滚动的层效果代码
- js实现文字定时向上滚动效果_文字特效_js网页特效代码
- JS实现网页上随滚动条滚动的层效果代码
- setInterval的使用练习——实现网页标题title的滚动效果。
- 如何用javascript实现 网页标题的滚动效果
- JS实现超简洁网页title标题跑动闪烁提示效果代码
- JS实现完全语义化的网页选项卡效果代码
- JS实现无限级网页折叠菜单(类似树形菜单)效果代码
- jquery实现初次打开有动画效果的网页TAB切换代码
- javascript 实现滚动效果代码整理
- JS实现的新浪微博大厅文字内容滚动效果代码
- jQuery实现网页顶部固定导航效果代码
- JS实现完全语义化的网页选项卡效果代码
- HTML5实现直播间评论滚动效果的代码
- 最简单实现网页返回效果的js代码
- 用SwiftUI实现3D Scroll滚动效果的实现代码
- JS小功能(offsetLeft实现图片滚动效果)实例代码
- js基于面向对象实现网页TAB选项卡菜单效果代码