<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
????<title>文本間歇性滾動</title>
</head>
<body>
<style?type="text/css">
#all{
????width:?400px;
????height:?215px;
????background:?#fff;
????border:5px?solid?rgb(171,171,171);
????border-radius:?10px;
????position:?relative;
}
#top{
????width:?400px;
????height:?60px;
????background:?rgb(218,73,90);
????position:?absolute;top:0;
????overflow:?hidden;?
}
#top?h1{
????font-size:?25px;
????color:?#fff;
????margin-left:?30px;
????margin-top:?15px;
}
#mainbody{
????overflow:?hidden;
????height:?300px;
}
#con1{
????width:?320px;
????list-style:?none;
}
#mainbody?li{
????height:?22px;
????line-height:?22px;
}
#mainbody?a:hover{color:?rgb(218,73,90);}
#mainbody?a{
????font-size:?12px;
????text-decoration:?none;
????color:?rgb(51,51,51);
}
#mainbody?span{
????font-size:?12px;
????float:?right;
????color:?rgb(153,153,153);
</style>
<script?type="text/javascript"?>
var?area=document.getElementById('mainbody');
var?liHeight=22;
var?speed=50;
area.innerHTML+=area.innerHTML;
area.scrollTop=0;
function?startScroll(){
????var?timer?=????setInterval('scrollUp()',speed);
????area.scrollTop++;
}
function?scrollUp(){
????if(area.scrollTop%liHeight==0){
????????????clearInterval(timer);
????????????setTimeout(startScroll,?2000);
????????}else{
????????????area.scrollTop++;
????????????if(area.scrollTop>=area.scrollHeight/2;){
????????????area.scrollTop=0;
????????}
????????}????
????????
}
setTimeout(startScroll,?2000);
area.onmouseover=function(){
????clearInterval(timer);
}
area.onmouseout=function(){
????timer?=????setInterval('scrollUp()',speed);
}
</script>
<div?id="all">
????<div?id="top"><h1>最新課程</h1></div>
????<div?id="mainbody">
????????<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>
</body>
</html>
2016-11-03
1.
#mainbody span{
? ?font-size: 12px;
? ?float: right;
? ?color: rgb(153,153,153);
后面缺回括號
2.
if(area.scrollTop>=area.scrollHeight/2;){
? ?area.scrollTop=0;
}
判斷條件多了個分號
area.innerHTML+=area.innerHTML;這個我的編譯器識別不了，我整體和老師不一樣。用了自己的方法。