<div id="warp">
<div class="header">
<div class="header_one">
<h1 class="title">最新课程</h1>
<a href="#">更多>></a>
</div>
<div class="header_tip"></div>
</div>
<div id="content">
<ul id="con1">
<li><a href="#">1.学会html5 绝对的屌丝逆袭(案例)</a><span>2013-09-18</span></li>
<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">
<li><a href="#">1.学会html5 绝对的屌丝逆袭(案例)</a><span>2013-09-18</span></li>
<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>
</div>
</div>
*{
padding:0;
margin:0;
}
#warp{
width:400px;
height:200px;
border:4px solid #ccc;
margin:0 auto;
}
.header{
width:400px;
height:60px;
background:#C33;
}
.header_one{
width:400px;
height:50px;
color:#fff;
float:left;
}
.header h1{
margin:10px 0 0 10px;
display:inline-block;
}
.header a{
float:right;
margin:30px 10px 0 0;
color:#fff;
text-decoration:none;
}
.header_tip{
width:400px;
height:10px;
float:left;
background:#fff;
}
#content{
width:400px;
height:110px;
overflow:hidden;
}
#con1{
margin:0 auto;
width:300px;
list-style-type:none;
font-size:10px;
}
#con1 li {
height:25px;
line-height:25px;
}
#con1 li a{
color:#000;
text-decoration:none;
}
#con1 li span{
color:#999;
float:right;
}
$(function(){
var $area = $('#content');
var $con1 = $('#con1');
$area.scrollTop = 0;
var myScroll = setInterval('myAnimate()',1000);
function myAnimate(){
$area.animate({
scrollTop:'$con1[0].scrollHeight()'
}),'slow',function(){
if($area.scrollTop >= $con1[0].scrollHeight){
$area.scrollTop = 0;
}else{
$area.scrollTop++;
};
};
};
$area.hover(function(){
clearInterval(myScroll);
},function(){
myScroll = setInterval('myAnimate()',1000);
});
})
qq_彦狐_0
鸡肋2016