一凉当、<marquee>標簽基礎(chǔ)知識
<marquee>標簽是用來做滾動效果的標簽枣申，隨著html5的大量使用，<marquee>應用越來越少
<marquee>標簽的五種屬性
1看杭、behavior 滾動的方式
alternate在兩端間來回滾動
scroll從一端滾到另一端忠藤，重復執(zhí)行a->b,a->b,a->b.......
slide從一端滾到另一端，停止
2楼雹、direction 滾動方向 down up left right
3模孩、loop 滾動次數(shù)，默認是-1贮缅，無限期滾動
4榨咐、scrollamount 設置活動字幕的滾動速度
5、scrolldelay 兩次滾動之間的時間間隔
6谴供、常用方法onmouseover="this.stop();" onmouseout="this.start();"鼠標放上停止块茁，移開繼續(xù)，stop()和start()是系統(tǒng)方法憔鬼，所以我們可以直接調(diào)用
二龟劲、滾動簡單效果
<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();"鼠標放上停止，移開繼續(xù)轴或，stop()和start()是系統(tǒng)方法
<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包竹，循環(huán)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">我在區(qū)域內(nèi)滾動，向上喲彼乌。泻肯。渊迁。。</marquee></dd>
</dl>
</div>
</body>
三灶挟、無縫滾動
基礎(chǔ)知識點
1琉朽、innerHTML
con2.innerHTML = con1.innerHTML;//讓con2復制con1內(nèi)容，con2的存在是為了填補空白
2膏萧、setInterval
3漓骚、clearInterval
4、scrollTop
scrollTop:設置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離 (即網(wǎng)頁被卷去的高)
5榛泛、offsetHeight
<body>
<!-- 慕課網(wǎng)課程公告開始 -->
<div id="mooc">
<!-- 頭部 -->
<h3 id="moocTitle">最新課程<a href="#" target="_self">更多>></a> </h3>
<!-- 頭部結(jié)束 -->
<!-- 中間 -->
<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基礎(chǔ)課程(系列)</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.如何實現(xiàn)“新手引導”效果</a><span>2013-12-06</span></li>
</ul>
<ul id="con2">
</ul>
</div>
<!-- 中間結(jié)束 -->
</div>
<!-- 慕課網(wǎng)課程公告結(jié)束 -->
<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內(nèi)容蝌蹂，con2的存在是為了填補空白
function scrollUp(){
// 當area的滾動高度和con1.scrollHeight高度相等時，回到初始高度曹锨；如果沒有孤个，繼續(xù)++
if(area.scrollTop >= con1.scrollHeight) {
area.scrollTop = 0;
}else{
area.scrollTop ++; //
}
}
var myScroll = setInterval("scrollUp()",speed);
// 移入移除效果
// 鼠標滑過，停止滑動沛简，停止定時器
// 鼠標移除齐鲤，繼續(xù)滑動，啟動定時器
area.onmouseover = function(){
clearInterval(myScroll);
}
area.onmouseout = function(){
// setInterval第一個參數(shù)可以是函數(shù)也可以是表達式椒楣，第二個事件間隔
myScroll = setInterval("scrollUp()",speed);
}
</script>
</body>
</html>
四给郊、單行滾動
setTimeout(表達式，延遲時間)執(zhí)行時捧灰，在載入后淆九，延遲一段時間（以毫秒計）后，執(zhí)行表達式毛俏，只執(zhí)行一次
setInterval(表達式炭庙，交互時間)每隔一個指定時間（以毫秒計），執(zhí)行一次表達式煌寇，循環(huán)執(zhí)行直到 clearInterval() 被調(diào)用或窗口被關(guān)閉焕蹄。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。
<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;//克隆一份一樣的內(nèi)容
function startScroll(){
time=setInterval("scrollUp()",speed);
area.scrollTop++;
}
function scrollUp(){
// 當滾動整一行時阀溶，清除定時器腻脏，然后延時兩秒再繼續(xù)執(zhí)行
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樣式徒仓，可以更改腐碱，顯示的行數(shù)。
