十行代码实现网页标题滚动效果!
本篇文章给同学们介绍一种让网页标题滚动的教程,注意是网页标题而不是网页内部文字哦,赶紧收藏学习吧。
怎么样才能实现网页标题滚动效果呢?时间就是金钱,废话不多说,直接上代码:
然后解释一下每一行的意思吧:
首先创建了一个变量 keyWords,用来存放网页标题滚动的文字(字符串)
接着创建一个命名函数 titleChange 执行以下操作:
1、用split() 方法(不改变原始字符串)将滚动的文字拆分为单个字符的数组keyList;
2、用shift()方法移出位于数组 keyList 头部的元素,并用变量 firstChar 存储;
3、用push()方法将步骤2中移除的字符,重新放到数组 keyList 的尾部;
4、用join() 方法将数组重新拼接为字符串,替换原本 keyWords 中存储的文本(字符串);
5、用 document.title 将步骤4中重新拼接的字符串,重新赋值到网页标题中;
这样就将 keyWords 中原本的第一个字符移动至最后一位,网页标题中原本位于第一个字符之后的文本会批量前移,实现文本向前滚动的效果,但是由于函数每次调用只会执行一次,所以最后我们还需要创建一个计时器,每个500毫秒重新调用一次 titleChange 函数,最终实现网页标题循环滚动的效果了。
我们还可以看一看控制台打印的 keyWords
最后大家想了解哪方面的内容,欢迎留言。
本文来自千锋教育,转载请注明出处。
十行代码实现网页标题滚动效果!相关推荐
- 网页视差滚动效果html,CSS视差滚动效果
一.效果Demo先行~视差滚动效果大家可能都听过,基本上都是JS实现的,有对应插件 - Parallax.js . 实际上,如果你对兼容性要求不是很高,比方说忽略IE浏览器,则我们使用简单的几行CSS ...
- html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果
1.概述 循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果.se ...
- html横向滚动字幕代码,jQuery文字横向滚动效果的实现代码
很多网站都有公告,并且都喜欢用横向滚动的方式来展现.最近自己用jQuery也写了文字横向滚动,实现了自定义滚动速度,鼠标经过时暂停的功能. HTML代码如下: jQuery文字横向滚动jQuery制作 ...
- 网页视差滚动效果html,30个使用视差滚动效果的时尚网页设计欣赏
30个使用视差滚动效果的时尚网页设计欣赏 10月 21, 2014 评论 Sponsor 如果一个网站想某些地方吸引访客的眼球,可以通过很多方式,比如放到网站的banner上,或是为内容添加特别的排版 ...
- 如何用一行代码实现网页变灰效果?
今天是 2020 年 4 月 4 日,星期六,清明节. 我们的国家经历了非常惨痛的时刻,很多英雄在救助他人的路上倒下,更有很多烈士英雄保卫人民的安危遇难,今天全国下降半旗,北京时间 10 点全国默哀三 ...
- 技术大揭秘:百度、淘宝、QQ那些官网如何就只用一行代码实现网页变灰效果?...
转自进击的Coder,作者崔庆才 今天是 2020 年 4 月 4 日,星期六,清明节. 我们的国家经历了非常惨痛的时刻,很多英雄在救助他人的路上倒下,更有很多烈士英雄保卫人民的安危遇难,今天全国下降 ...
- html左右循环滚动代码,不间断循环滚动效果的实例代码(必看篇)
滚动测试 /** * @para obj 目标对象 如:demo,deml1,demo2 中的"demo" 可任意,只要不重复 * * @para speed 滚动速度 越大越慢 ...
- 前端教程分享:十行代码实现title滚动显示
细心的同学可能会发现我们网站的title显示的文字永远都是固定的不会移动的,那么有没有什么办法能让title滚动显示呢? 怎么样才能实现网页标题滚动效果呢?时间就是金钱,废话不多说,直接上代码: 然后 ...
- 十行代码实现title滚动显示
细心的同学可能会发现我们网站的title显示的文字永远都是固定的不会移动的,那么有没有什么办法能让title滚动显示呢? 怎么样才能实现网页标题滚动效果呢?时间就是金钱,废话不多说,直接上代码: 然后 ...
最新文章
- 【LINUX 学习】Ext3 的三种日志记录方式
- linux apt-get proxy
- Java11震撼发布了,我们该怎么办?
- 【JavaSE04】Java中循环语句for,while,do···while-思维导图
- mysql5.7主从同步与读写分离
- Android之应用程序如何调用支付宝接口
- day13 迭代器和生成器
- 这8种常见的SQL错误用法,你还在用吗?
- mysql查询中怎样使用索引_MySQL如何使用索引
- Android 系统(169)---Android 7.0 插卡后APN信息的加载流程
- 计算机控制中的pid是什么意思,PID代表的是什么意思?
- FTPserver 配置
- tomcat 配置域名和ssl证书
- 心理学中的催眠术怎么学[为本教育]
- 算法谜题1,狼羊菜过河
- Python turtle绘图(星之卡比)
- 2020年8月份需求排期
- W800/W801学习记录网络部分(一):WIFI的扫描和连接
- maven 打的包在哪_Maven实战指南:“打包”的技巧
- [附源码]java毕业设计代驾服务系统
热门文章
- Java 第二章 程序设计基础
- 十进制小数转换为二进制
- 第一阶段:Java基础之变量
- java.util.NoSuchElementException: Unable to validate object
- gRPC——简介与Hello World
- Python——基于OpenCV获取倾斜子图的一种方法
- Vue——使用element-resize-detector监听DOM时ID重复时移除监听器时错误解决方案
- Visual C++ MFC——基于Shell的Windows GUI小程序DEMO(打开计算器|打开记事本|IP查询|Windows激活状态查询)
- Alibaba Cloud Toolkit——简介
- Spring Boot——基于OkHTTP的GitHub第三方登录DEMO