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>
我是滚动字幕