Web前端——信息滚动marquee
一、<marquee>标签基础知识
<marquee>标签是用来做滚动效果的标签，随着html5的大量使用，<marquee>应用越来越少
<marquee>标签的五种属性
1、behavior 滚动的方式
alternate在两端间来回滚动
scroll从一端滚到另一端，重复执行a->b,a->b,a->b.......
slide从一端滚到另一端，停止
2、direction 滚动方向 down up left right
3、loop 滚动次数，默认是-1，无限期滚动
4、scrollamount 设置活动字幕的滚动速度
5、scrolldelay 两次滚动之间的时间间隔
6、常用方法onmouseover="this.stop();" onmouseout="this.start();"鼠标放上停止，移开继续，stop()和start()是系统方法，所以我们可以直接调用
二、滚动简单效果
<title>HTML文字滚动效果</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:500px;
border:3px solid #ccc;
margin:50px auto 0;
padding:10px;
}
dl,dt{
list-style:none;
}
dl dt{
line-height:24px;
font-size:16px;
font-weight:bold;
color:#000;
}
</style>
</head>
<body>
<div class="box">
<dl>
<dt>文字滚动示例（默认）：</dt>
// onmouseover="this.stop();" onmouseout="this.start();"鼠标放上停止，移开继续，stop()和start()是系统方法
<dd><marquee onmouseover="this.stop();" onmouseout="this.start();">我默认向左滚。。。。。</marquee></dd>
</dl>
<dl>
<dt>文字滚动示例（向右）：</dt>
<dd><marquee direction="right" scrolldelay="50">我向右滚动。。。。</marquee></dd>
</dl>
<dl>
<dt>文字滚动示例（默认方向，滚动方式为alternate，循环3次，速度为2）：</dt>
<dd><marquee scrollamount="2" behavior="alternate" loop="3">我来回滚动。。。。 </marquee></dd>
</dl>
<dl>
<dt>文字滚动示例（向上，背景色为#CCFF66，设置了背景宽度和高度）：</dt>
<dd><marquee direction="up" bgcolor="#CCFF66" width="250" height="55">我在区域内滚动，向上哟。。。。</marquee></dd>
</dl>
</div>
</body>
三、无缝滚动
基础知识点
1、innerHTML
con2.innerHTML = con1.innerHTML;//让con2复制con1内容，con2的存在是为了填补空白
2、setInterval
3、clearInterval
4、scrollTop
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (即网页被卷去的高)
5、offsetHeight
<body>
<!-- 慕课网课程公告开始 -->
<div id="mooc">
<!-- 头部 -->
<h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a> </h3>
<!-- 头部结束 -->
<!-- 中间 -->
<div id="moocBox">
<ul id="con1">
<li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
<li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
<li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
<li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
<li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
<li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
</ul>
<ul id="con2">
</ul>
</div>
<!-- 中间结束 -->
</div>
<!-- 慕课网课程公告结束 -->
<script type="text/javascript">
var area = document.getElementById('moocBox');
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
var speed = 50;
area.scrollTop = 0;
con2.innerHTML = con1.innerHTML;//让con2复制con1内容，con2的存在是为了填补空白
function scrollUp(){
// 当area的滚动高度和con1.scrollHeight高度相等时，回到初始高度；如果没有，继续++
if(area.scrollTop >= con1.scrollHeight) {
area.scrollTop = 0;
}else{
area.scrollTop ++; //
}
}
var myScroll = setInterval("scrollUp()",speed);
// 移入移除效果
// 鼠标滑过，停止滑动，停止定时器
// 鼠标移除，继续滑动，启动定时器
area.onmouseover = function(){
clearInterval(myScroll);
}
area.onmouseout = function(){
// setInterval第一个参数可以是函数也可以是表达式，第二个事件间隔
myScroll = setInterval("scrollUp()",speed);
}
</script>
</body>
</html>
屏幕录制.gif
四、单行滚动
setTimeout(表达式，延迟时间)执行时，在载入后，延迟一段时间（以毫秒计）后，执行表达式，只执行一次
setInterval(表达式，交互时间)每隔一个指定时间（以毫秒计），执行一次表达式，循环执行直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
<script type="text/javascript">
var area = document.getElementById('moocBox');
var iliHeight = 24;//单行滚动的高度
var speed = 50;//滚动的速度50毫秒
var time;
var delay= 2000;//延迟时间两秒
area.scrollTop=0;
area.innerHTML+=area.innerHTML;//克隆一份一样的内容
function startScroll(){
time=setInterval("scrollUp()",speed);
area.scrollTop++;
}
function scrollUp(){
// 当滚动整一行时，清除定时器，然后延时两秒再继续执行
if(area.scrollTop % iliHeight==0){
clearInterval(time);
setTimeout(startScroll,delay);
}else{
area.scrollTop++;
if(area.scrollTop >= area.scrollHeight/2){
area.scrollTop =0;
}
}
}
setTimeout(startScroll,delay)
</script>
其他情况：
1、通过设置滚动高度var iliHeight = 24;可以显示，一次滚动几行。
2、通过设置moocBox这个div的css样式，可以更改，显示的行数。
