列表的鼠标按下滚动抬起停止效果

效果预览：



html部分：

<h2 id="title">淘宝列表 <a href="#">>>更多</a></h2>
<div id="top"></div>
<div id="list">
<ul id="content">
<li>
<h3>标题</h3>
<img src="img/淘宝图片1.jpg"/>
<p>描述</p>
</li>
<li>
<h3>标题</h3>
<img src="img/淘宝图片2.jpg"/>
<p>描述</p>
</li>
<li>
<h3>标题</h3>
<img src="img/淘宝图片3.jpg"/>
<p>描述</p>
</li>
<li>
<h3>标题</h3>
<img src="img/淘宝图片4.jpg"/>
<p>描述</p>
</li>
<li>
<h3>标题</h3>
<img src="img/淘宝图片5.jpg"/>
<p>描述</p>
</li>
<li>
<h3>标题</h3>
<img src="img/淘宝图片6.jpg"/>
<p>描述</p>
</li>
</ul>
</div>
<div id="bottom"></div>

css部分：
h2,h3,p,ul{
margin: 0;
padding: 0;}
#title{
height: 30px;
width: 150px;
margin:0 auto;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 30px;
background: #daa20f;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;}
#title a{
text-decoration: none;
float:right;
margin-right: 10px;
color: #971b2b;
font-size: 15px;}
#list{
height: 300px;
width: 150px;
border:1px solid #888888;
margin: 3px auto 3px auto;
overflow: hidden;
position:relative;}
#list ul{
position: absolute;
top: 0;
left: 0;}
#list li{
height: 151px;
width: 150px;
list-style: none;
position: relative;
border-bottom:1px solid #888888 ;}
#list h3{
height: 25px;
width: 150px;
text-align: center;
font-size: 18px;
font-weight: 300;
color: #ffffff;
background: #ff4400;
opacity: .8;
position: absolute;
top: 0;
left: 0;}
#list p{
height: 20px;
width: 150px;
background: #ff4400;
font-size: 15px;
color: #ffffff;
opacity: .8;
position: absolute;
bottom: 0;
left: 0;}
#list img{
height: 150px;
width: 150px;}
#top,#bottom{
width: 152px;
height: 20px;
margin:0 auto;
background: #c2c2c2 center no-repeat;
cursor: pointer;}
#top{
background-image: url(img/ico2.gif);}
#bottom{
background-image: url(img/ico3.gif);}

JavaScript部分：
window.onload = function () {
var oTop = document.getElementById('top');
var oBottom = document.getElementById('bottom');
var oUl = document.getElementsByTagName('ul')[0];
var timerUp = null;
var timerDown = null;

//动态获取元素的样式

function getStyle(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}

//按下向下滑动
oTop.onmousedown = function () {
timerUp = setInterval( function () {
if (parseInt( getStyle(oUl,'top') ) > -610 ){
oUl.style.top =
4000
parseInt( getStyle(oUl,'top') ) - 5 +'px';}
else{oUl.style.top = '-610px'; }
} ,50);
}
//抬起停止滑动
oTop.onmouseup = function () {
clearInterval(timerUp);
}
//按下向上滑动
oBottom.onmousedown = function () {
timerDown = setInterval( function () {
if (parseInt( getStyle(oUl,'top') ) < 0 ){
oUl.style.top = parseInt( getStyle(oUl,'top') ) + 5 +'px';}
else{oUl.style.top = '0px'; }
} ,50);
}
//抬起停止滑动
oBottom.onmouseup = function () {
clearInterval(timerDown);
}
}