1、引言
js网页制作滚动字幕是一项技术，它可以为网页添加一些跑马灯效果，以实现显示一串文本的滚动效果。它所涉及的技术不仅局限于html的简单使用，还要使用js或者css来实现。
2、JS实现滚动字幕
（1）调整CSS样式，让字幕区域拥有固定的高度和超出内容部分的滚动条：div { position:relative; width: 600px; height: 50px; overflow: hidden; }
（2）使用js代码让文字不断向右移动，并形成跑马灯效果：
<script>
var scroll_div = document.getElementById(\"scroll_div\");
setInterval(function(){scroll_div.scrollLeft ++;}, 50);
</script>
（3）当字幕滚动到一定位置时，让其回到初始位置：
<script>
var scroll_div = document.getElementById(\"scroll_div\");
if(scroll_div.scrollLeft == scroll_div.scrollWidth){
scroll_div.scrollLeft = 0;
}
</script>
3、CSS实现滚动字幕
（1）调整CSS样式，让字幕比设置的容器宽度要更宽：div { position:relative; width: 600px; height: 50px; overflow: hidden; }
（2）使用CSS特殊属性，使字幕从右往左移动：
<style>
#scroll_div { position:relative; width: 600px; height: 50px; overflow: hidden; white-space: nowrap; animation: scro 20s linear: }
@keyframes scro {
from{transform: translateX(100%);}
to {transform : translateX(-100%); }
}
</style>
（3）让字幕回到初始位置，延续循环移动：animation-iteration-count: infinite;
4、总结
js网页制作滚动字幕，主要是使用js或css此技术来完成，借助少量的代码就可以实现网页文字的跑马灯效果的滚动，简单实用又美观，在网页设计中应用十分方便。除此之外，还可以通过动态设置字幕的显示内容，实现实时滚动播出资讯的功能，实现实时更新的目的，增强用户体验。
JS网页制作滚动字幕
一、实现思路
1，使用JavaScript实现滚动字幕，通过设置字幕div的位置、滚动速度等参数。
2，可以使用setInterval函数，实现每隔一段时间，实现对应div的移动。
二、具体实现
1，首先定义字幕div，这里可以使用p标签，将要滚动的内容写入p标签中，
我是滚动的字幕
2，实现div的定位，可以使用CSS实现div的定位，可以给p标签设置宽度、高度、背景色，例如如下代码
#marquee
{
width: 300px; //定义宽度
height: 50px; //定义高度
line-height:50px; //定义行高
background: #E8E893;//设置背景色
position: relative; //定位方式
}
3，实现滚动
要实现滚动，可以使用setInterval函数，
setInterval(function () {
var left = document.getElementById(marquee).offsetLeft; //获取元素相对于父元素的左边距
document.getElementById(marquee).style.left=left-1+px; //改变left值，让文字向左移动
if(left<=-300) { //当超出显示框时，重置Div位置
document.getElementById(marquee).style.left=900+px;
}
},30); //30毫秒移动一次
以上代码分别实现了获取div的位置，改变div的位置，从而实现滚动的效果。
四、实现完整代码
<style>
#marquee {
width: 300px;
height: 50px;
line-height:50px;
background: e8e893;
position: relative;
}
</style>
<script type = \"text/javascript\">
window.onload = function () {
setInterval(function () {
var left = document.getElementById(marquee).offsetLeft;
document.getElementById(marquee).style.left=left-1+px;
if(left<=-300) {
document.getElementById(marquee).style.left=900+px;
}
},30);
};
</script>
<body>
我是滚动字幕
