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;}
a.red:link{color: #ff0000;font-size:12px;}
a.red:hover{color: #ff0000;font-size:12px;}
a.red:visited{color: #ff0000;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">
var marqueeContent=new Array();
marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用快速取回帐号密码</a>";
marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a>";
marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a>";
marqueeContent[3]="<a href=http://xyq.163.com/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;
if(document.getElementById("marqueeBox").childNodes.length==1) {
var nextLine=document.createElement('DIV');
nextLine.innerHTML=str;
document.getElementById("marqueeBox").appendChild(nextLine);
}
else {
document.getElementById("marqueeBox").childNodes[0].innerHTML=str;
document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]);
document.getElementById("marqueeBox").scrollTop=0;
}
clearInterval(marqueeInterval[1]);
marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
function scrollMarquee() {
document.getElementById("marqueeBox").scrollTop++;
if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1]);
}
}
initMarquee();
</script>
</body>
</html>
也可以用css3实现:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> @keyframes move { 0% { transform:translateY(0px); } 50% { transform:translateY(-200px); } 100% { transform:translateY(0px); } } .picTab{height:500px;border:2px solid #000; margin:50px auto;overflow:hidden;} .picTab .topDiv{width:1000px;height:500px; animation:move 5s linear infinite;text-align:center;} .picTab div {margin:5px;color:black; } </style> </head> <body> <DIV class="picTab"> <div class="topDiv"> <div>"控制洗衣机"</div> <div>"控制冰箱"</div> <div>"开启洗衣机"</div> <div>"开始洗衣"</div> <div>"关闭洗衣机"</div> <div>"棉麻洗"</div> <div>"洗涤时间设为20分钟"</div> <div>"漂洗2次"</div> <div>"脱水6分钟"</div> <div>"冰箱设为速冷模式"</div> <div>"冷藏室温度设为5度"</div> <div>"天气"</div> </div> </DIV> </body> </html>