                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /信息滾動效果制作

如何實現優(yōu)美的漸變效果？

<!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();
}