用js实现网页标题的字体滚动效果

最新推荐文章于 2021-06-09 16:27:01 发布

sunping177

最新推荐文章于 2021-06-09 16:27:01 发布

阅读量1.9k

点赞数

分类专栏： jquery 标题滚动走马灯效果 js dom 文章标签：标题滚动 setInterval js显示标题滚动 javascript Dom

本文链接：https://blog.csdn.net/sunping177/article/details/24028293

版权

jquery 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

标题滚动

1 篇文章 0 订阅

订阅专栏

走马灯效果

1 篇文章 0 订阅

订阅专栏

在网页中看到网页的标题滚动效果，以下是是用dom实现的简单的标题滚动（走马灯）效果

<head>
    <title>郑州欢迎你</title>
    <script type="text/javascript">
       var timerId;
        function scroll() {
            var title = document.title;
            var lastCh = title.charAt(title.length - 1); //容易错

            var leftStr = title.substring(0, title.length - 1);
            
            document.title = lastCh + leftStr;
        }
        //每调用一次setInterval都会产生一个新的定时器，并且旧的不会自动停止。所以看起来好像“越跑越快”！
        
    </script>
</head>
<body >
<input type="button" value="滚动" οnclick="if(timerId){clearInterval(timerId);}timerId=setInterval('scroll()', 500)" />
<input type="button" value="停止（错误写法）" οnclick="clearInterval(setInterval('scroll()', 500))" />
<input type="button" value="停止" οnclick="clearInterval(timerId)" />


</body>

特别提醒一下

每调用一次setInterval都会产生一个新的定时器，并且旧的不会自动停止。所以看起来好像“越跑越快”！

clearInterval(setInterval('scroll()', 500))，错，不会停止原先的定时器，因为setInterval就产生一个新的定时器，刚产生就被clear。