<!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>
