千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > 前端小技巧|十行代码实现title滚动显示

前端小技巧|十行代码实现title滚动显示

来源:千锋教育
发布人:小千
时间: 2021-05-08 08:59:00 1620435540

      细心的同学可能会发现我们网站的title显示的文字永远都是固定的不会移动的,那么有没有什么办法能让title滚动显示呢?

title滚动1

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

title滚动代码

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

      首先创建了一个变量 keyWords,用来存放网页标题滚动的文字(字符串)

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

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

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

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

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

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

      这样就将 keyWords 中原本的第一个字符移动至最后一位,网页标题中原本位于第一个字符之后的文本会批量前移,实现文本向前滚动的效果,但是由于函数每次调用只会执行一次,所以最后我们还需要创建一个计时器,每个500毫秒重新调用一次 titleChange 函数。

      最终实现网页标题循环滚动的效果了,我们还可以看一看控制台打印的 keyWords,啊呀!我感觉做了一个洗剪吹门口的霓虹灯呀 。。。

 

title演示

      赶紧去自己上手试一试吧,最后欢迎同学们来到千锋前端培训班了解我们的前端培训课程,现在咨询还有免费学习资料可以领取,赶紧来看看吧。

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT