                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /信息滚动效果制作

如何实现优美的渐变效果？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/14.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/14.css"/>
	</head>
	<body>
		<div id="box">
			<div id="box_1">
				<p>最新课程</p>
				<a href="#">更多>></a>
			</div>
		<div id="box_2">
			<ul id="ul_1">
				<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='ul_2'></ul>
		</div>
		</div>
	</body>
</html>

*{
	margin: 0;
	padding: 0;
	font-size: 15px;
}
#box{
	margin: 0 auto;
	border: 6px solid slategray;
	border-radius: 15px;
	width: 440px;
	height: 260px;
}
a{
	text-decoration: none;
	color: #000000;
}
#box_1{
	height: 80px;
	width: 440px;
	background-color: crimson;
	line-height: 80px;
	font-weight: bold;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	position: relative;
}
#box_1 a{
	color: whitesmoke;
	position: absolute;
	right: 6px;
	top: 20px;
}
#box_1 p{
	color: whitesmoke;
	font-size: 30px;
	position: absolute;
	left: 40px;
}
#box_2{
	width: 440px;
	height: 180px;
	line-height: 31px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	background-color: snow;
	overflow: auto;
}
#box_2 ul{
	list-style: none;
}
#box_2 li{
	position:  relative;
}
#box_2>ul>li>a{
	margin-left: 30px;
}
#box_2>ul>li>span{
	position:absolute;
	right: 50px;
}

window.onload=function(){
	aa()
}
function aa(){
	box_2=document.getElementById('box_2');
	ul=document.getElementsByTagName('ul');
	ul[1].innerHTML=ul[0].innerHTML;
	setTimeout(scroll,50);
	box_2.onmouseover=scrollStop;
	box_2.onmouseout=scrollGo;
}
function scroll(){
	clearTimeout(scroll.a);
	ul_1=document.getElementById('ul_1');
	box_2=document.getElementById('box_2');
	if(box_2.scrollTop>=ul_1.scrollHeight){
		box_2.scrollTop=0
	}else{
		box_2.scrollTop++
	}
	scroll.a=setTimeout(arguments.callee,50);
}
function scrollStop(){
	clearTimeout(scroll.a)
} 
function scrollGo(){
	scroll();
}