js实现title滚动效果

js实现title滚动效果原理:取第一个字符,放到尾部,定时循环操作,在视觉就有滚动效果了。直接上代码了方式一var titleText = "您有新订单,请及时处理!".split("")var timerID = nullfunction rollingTitleText(){ timerID = setTimeout(() => { documen...
摘要由CSDN通过智能技术生成

js实现title滚动效果

原理:取第一个字符,放到尾部,定时循环操作,在视觉就有滚动效果了。直接上代码了

方式一
var titleText = "您有新订单,请及时处理!".split("")
var timerID = null
function rollingTitleText(){  
     timerID = setTimeout(() => {
       document.title = titleText.join("")
       titleText.push(titleText[0])  //方法可向数组的末尾添加一个元素,并返回新的长度 
       titleText.shift()    // 去掉数组的第一个元素  
       rollingTitleText()
     }, 1000)
 },
// 清除document.title 滚动
function clearTollingTitleText(){
    document.title = "订单管理系统"
    clearTimeout(timerID) 
},
window.onload=function(){
   rollingTitleText()
 }
方式二
var titleText = "您有新订单,请及时处理!".split("")
var timerID = null
function rollingTitleText(){  
     timerID = setTimeout(() => {
       document.title = titleTex
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现导航随着页面滚动滚动,可以使用JavaScript来完成。首先,我们需要监听页面滚动的事件。通过`window`对象的`onscroll`事件,我们可以在页面滚动时触发相应的函数。 接下来,我们需要判断页面滚动的距离。可以使用`window.pageYOffset`来获取页面垂直滚动的距离。根据这个距离,我们可以触发相应的导航样式变化。 我们可以透过获取导航栏元素(比如`<nav>`)的引用,使用JavaScript来修改其样式。比如,当页面滚动距离大于某个值时,我们可以设置导航栏的`position`属性为`fixed`,使其固定在页面顶部。当页面滚动距离小于这个值时,我们可以还原导航栏的样式。 以下是一个简单的示例代码,实现了导航随着页面滚动滚动效果: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>滚动导航栏示例</title> <style> body { height: 2000px; margin: 0; padding: 0; } nav { background-color: #f2f2f2; width: 100%; height: 50px; position: relative; } .fixed { position: fixed; top: 0; left: 0; } </style> </head> <body> <nav id="navbar">导航栏</nav> <script> window.onscroll = function() { var navbar = document.getElementById('navbar'); var scrollDistance = window.pageYOffset; if (scrollDistance > 100) { navbar.classList.add('fixed'); } else { navbar.classList.remove('fixed'); } }; </script> </body> </html> ``` 在这个示例中,当页面滚动距离超过100像素时,导航栏的样式会发生变化,添加`.fixed`类,通过`position: fixed`将其固定在页面顶部。当页面滚动距离小于100像素时,移除`.fixed`类,恢复导航栏的正常样式。 以上就是使用JavaScript实现导航随着页面滚动滚动的简单示例。当然,根据实际需求,你还可以添加更多的效果和样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值