静态网页滚动条

最新推荐文章于 2025-05-17 12:13:26 发布

原创最新推荐文章于 2025-05-17 12:13:26 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#练习

网页制作专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在静态网页中创建滚动条效果。通过HTML、CSS和JavaScript的结合使用，利用setInterval()函数周期性改变文本内容，实现文本逐字滚动的动画效果。详细讲解了HTML结构和JavaScript的具体实现方法，欢迎交流指正。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

静态网页制作滚动条

一.效果图

嗯…实际动画效果就是它在一个字一个字地向前滚。

二.HTML结构

HTML它…没有什么好说的，只是一段文本。还是讲讲js吧。
这里用到了一个方法setInterval()，可以周期性地调用函数。我们可以通过函数来改变显示的文本内容，然后再通过周期性调用该函数来达到文本内容周期性变化的效果。
而改变文本内容的函数就是获得p中文本，将文本内容的第一个字符调到最后一位去，组成新的文本，再传回p，几次调用下来就会产生滚动的效果。

三.具体实现

HTML

<body>
<div>
    <p id="roll">WARNING!WARNING!WARNING!WARNING!WARNING!WARNING!WARNING!</p>
</div>
<script src="l.js"></script>
</body>

CSS

div{
    width:100%;
    margin:0;
    padding:0;
    background-color: #312a28;
    color: #ff5839;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    overflow: hidden;
}
#roll{
    padding-top:10px;
    padding-left: 0;
}

JavaScript

function func(){
    var tag=document.getElementById("roll");
    var content=tag.innerText;
    var f=content.charAt(0);
    var l=content.substring(1,content.length);
    var new_content=l+f;
    tag.innerText=new_content;
}
setInterval("func()",500);

就是这样吼，有什么错误请多指正，大家一起交流交流。