JavaScript 实现标题滚动效果

Posted 「已注销」

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 实现标题滚动效果相关的知识,希望对你有一定的参考价值。

javascript 实现标题滚动效果

实现步骤

  • 定义需要滚动的标题字符串
    let title = 'Nothing is impossible for a willing mind'
  • 定义实现标题滚动的函数
    function titleChange () 
      const keywords = title.split('') // 将标题转为字符串数组
      const firstChar = keywords.shift() // 取出标题中第一个字符
      keywords.push(firstChar)
      title = keywords.join('')
      document.title = title
    
  • 开启定时器
    setInterval(fn, delay)

完整代码

    let title = 'Nothing is impossible for a willing mind'
    function titleChange () 
      const keywords = title.split('')
      const firstChar = keywords.shift()
      keywords.push(firstChar)
      title = keywords.join('')
      document.title = title
    
    setInterval(titleChange, 500)

以上是关于JavaScript 实现标题滚动效果的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript 实现标题滚动效果

JavaScript设置div中的文字滚动起来 实现滚动效果

使用原生javascript实现网页中banner滚动切换效果

JQuery实现文字无缝滚动效果 Marquee插件

marquee实现滚动效果

[译] 现代 JavaScript 与 CSS 滚动实现指南