HTML如何实现滚动⽂字
⼀、HTML滚动⽂字
marquee 滚动⽂字标签
在⼀个页⾯中会有很多多媒体元素，⽐如动态⽂字、动态图象、⾳视频等，⽽最简单的就是天价滚动⽂字了，在HTML中，如果我们想要添加滚动⽂字，需要使⽤marquee标签。
我们先来看⼀下最简单的⽰例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
</head>
<body >
<marquee><span >Welcom CSDN!</span></marquee>
</body>
</html>
为了显⽰效果更明显，这⾥将页⾯背景设置为⿊⾊，将滚动⽂字设置为⽩⾊，显⽰效果如图：
这样我们就实现了⼀个最简单的滚动⽂字，在滚动⽂字中还有⼀些属性⽤于控制滚动⽅向、滚动速度等，下⾯我们就来看⼀下⼏个⽐较常⽤的属性。
direction 滚动⽅向属性
默认情况下，⽂字从右向左滚动，实际应⽤中，我们可能需要改变⽅向，就可以通过该属性来设置，该属性可⽤值有：
up，down，left，right，分别表⽰向上、向下、向左和向右滚动。
⽰例如下：
<title>marquee</title>
<style>
body {
background: black;
padding:20px;
}
marquee {
font-weight: bolder;
font-size:40px;
color: white;
}
</style>
</head>
<body>
<marquee direction="up">UP</marquee>
<marquee direction="down">DOWN</marquee>
<marquee direction="left">LEFT</marquee>
<marquee direction="right">RIGHT</marquee>
</body>
</html>
behavior 滚动⽅式属性
通过behavior 可以设置滚动⽅式，如往复运动等。behavior可⽤值有：scroll，slide，alternate，分别表⽰循环滚动、只滚动⼀次就停⽌和来回交替滚动。
⽰例如下：
<title>marquee</title>
<style>
body {
background: black;
padding:20px;
}
marquee {
font-weight: bolder;
font-size:40px;
color: white;
}
</style>
</head>
<body>
<marquee behavior="scroll">scroll</marquee>
<marquee behavior="slide">slide</marquee>
<marquee behavior="alternate">alternate</marquee>
</body>
</html>
scrolldelay 滚动延迟属性与scrollamount 滚动速度属性
通过scrolldelay属性可以设置⽂字滚动的时间间隔。scrolldelay 的时间间隔单位是毫秒，这⼀时间间隔设置为滚动两步之间的时间间隔，如果时间过长，则会出现⾛⾛停停的效果。
scrollamount ⽤于设置滚动的步长。
⽰例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
<style>
body {
background: black;
padding:20px;
}
marquee {
font-weight: bolder;
font-size:40px;
color: white;
}
</style>
</head>
<body>
<marquee scrolldelay="800" scrollamount="100">Welcom CSDN!</marquee>
</body>
</html>
loop 滚动循环属性
如果我们希望⽂字滚动⼏次后停⽌，就可以使⽤loop属性。
⽰例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
<style>
body {
background: black;
padding:20px;
}
marquee {
font-weight: bolder;
font-size:40px;
color: white;
}
</style>
</head>
<body>
<marquee loop="2">Welcom CSDN!</marquee>
</body>
</html>
⼆、html5 css3实现字幕滚动的效果
html5中marquee逐渐被取代，要实现字幕的滚动可以再js中实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html5</title>
<style>
body {
margin:0px;
font-size:12px;
color:#938C43;
line-height:150%;
text-align:center;
}
a:link{color:#9D943A;font-size:12px;}
a:hover{color:#FF3300;font-size:12px;}
a:visited{color:#9D943A;font-size:12px;}
#marqueeBox{background:#f7f7f7;border:1px solid silver;padding:1px;text-align:center;margin:0 auto;}
-->
</style>
</head>
<body>
<h4>滚动新闻</h4>
<script language="JavaScript" type="text/javascript">
font weight boldervar marqueeContent=new Array();
marqueeContent[0]="<a href=xyq.163/news/2006/11/2-2-20061102170913.html target=_blank>⽤快速取回帐号密码</a>";
marqueeContent[1]="<a href=ekey.163/ target=_blank>⽹易将军令官⽅⽹站</a>";
marqueeContent[2]="<a href=xyq.163/download/wallpaper.htm target=_blank>最新壁纸下载</a>";
marqueeContent[3]="<a href=xyq.163/download/around.htm target=_blank>最新屏保下载</a>";
var marqueeInterval=new Array();
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=20;
function initMarquee(){
var str=marqueeContent[0];
document.write('<div id="marqueeBox" style="overflow:hidden;width:250px;height:'+marqueeHeight+
'px" οnmοuseοver="clearInterval(marqueeInterval[0 ])" οnmοuseοut="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>');
marqueeId++;
marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
function startMarquee(){
var str=marqueeContent[marqueeId];
marqueeId++;
if(marqueeId>=marqueeContent.length) marqueeId=0;
ElementById("marqueeBox").childNodes.length==1){
var ateElement('DIV');
nextLine.innerHTML=str;
}
else{
}
clearInterval(marqueeInterval[1]);
marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
function scrollMarquee(){
ElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1]);
}
}
initMarquee();
</script>
</body>
</html>
也可以⽤css3实现：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。