如何用javascript实现网页标题的滚动效果

最新推荐文章于 2025-11-15 13:36:27 发布

原创最新推荐文章于 2025-11-15 13:36:27 发布 · 2.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #网页 #页面标题滚动 #标题滚动

web开发同时被 2 个专栏收录

3 篇文章

订阅专栏

javascript

0 篇文章

订阅专栏

本文详细介绍了如何利用JavaScript编程实现网页标题的滚动动画效果，包括设置标题文本，定义滚动速度，以及处理滚动方向等关键步骤，帮助开发者创建动态且吸引人的网页头部体验。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>你好，jinhom</title>
</head>
    <body onload="init()">
    <script type="text/javascript">
    function init(){
        //拿到标题栏的文本
        var title = document.title;
        //将文本字符串转换为数组
        var arr = title.split("");
        //拿到数组的第一个元素，并从数组中删除
        var first = arr.shift();
        //将第一个元素添加到数组的最后
        arr.push(first);
        //将数组再组合成一个字符串
        title = arr.join("");
        document.title = title;
        //每隔一秒做一遍前6步
        setTimeout("init()",1000);
    }

</script>
</body>
</html>