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;}
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>

html5 css3实现字幕滚动的效果相关推荐

html如何添加时钟效果,基于HTML5+CSS3实现简单的时钟效果
目的: 利用html5,css实现钟摆效果知识点: 1) 利用position/left/top和calc()实现元素的水平和垂直居中: 2) 利用CSS3的animation/transform/ ...
html移动端语音波纹,html5 +css3 点击后水波纹扩散效果兼容移动端
html5+ js +css3 点击后水波纹扩散效果兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...
html 图片自动滚动播放,CSS3实现图片滚动播放效果
CSS3实现图片滚轮效果在平常我们使用一些滚动图片的效果,都是用javascript代码(JQuery)实现,但是在如今Html5和CSS3盛行的时代,可以替代javascript代码来实现一些常见 ...
html5 css3 slider,使用html5+css3来实现slider切换效果告别javascript+css_html5教程技巧
好吧,上次说要赶紧的补上几篇文章,结果淡定的失约了.又是近一个月才发一篇,真是让人郁闷.发现最近总是抽不出时间了,基本都是一个项目接一个项目的安排,自己不是在空闲的时候找不到合适的话题,就是在有纠结话 ...
HTML5+CSS3 最酷的 loading 效果汇总
用 gif 图片来做 loading 的时代已经过去了,它显得太 low 了,而用 HTML5/CSS3 以及 SVG 和 canvas 来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收 ...
制作一个广告字幕滚动效果的网页的心路历程
先看效果刚开始的需求是,制作一个类似电视广告字幕的效果,我没什么思路,后来看了字幕的实现方式,就是用css动画的移动实现,于是我开始了对这段动画的驾驭. 技术:万能的vue.js html5 css ...
HTML5+CSS3小实例：菜单栏图标悬停效果
HTML5+CSS3实现菜单栏图标悬停效果,紫色的tabbar标签栏,默认显示图标,鼠标悬停图标上移,显示文字,过程伴随细微动画,字体图标用的是font-awesome. 效果: 源码: <!D ...
HTML5+CSS3小实例：闪亮的玻璃图标悬浮效果
HTML5+CSS3实现闪亮的玻璃图标悬浮效果,光与玻璃的碰撞,好有质感的玻璃图标. 先看效果: 源代码: <!DOCTYPE html> <html><head> ...
css 波纹扩散_html5 +css3 点击后水波纹扩散效果兼容移动端
html5+ js +css3 点击后水波纹扩散效果兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...

html5 css3实现字幕滚动的效果

html5 css3实现字幕滚动的效果相关推荐

最新文章

热门文章