控制产品上下滚动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function ()
{
var odiv = document.getElementById('content');
var oul = odiv.getElementsByTagName('ul')[0];
var otop = document.getElementById('top');
var odown = document.getElementById('down');
var timer;
function getstyle(obj,attr)
{
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
};
//向下
function down()
{
if( parseInt(getstyle(oul,'top')) > -380 )
{
oul.style.top = parseInt(getstyle(oul,'top')) - 10 + 'px';
}
else
{
oul.style.top = '-380px';
}
};
//向上
function up()
{
if( parseInt(getstyle(oul,'top')) < 0 )
{
oul.style.top = parseInt(getstyle(oul,'top')) +10 + 'px';
}
else
{
oul.style.top = '0px';
}
};
otop.onmousedown = function ()
{
timeup = setInterval( up , 50);
};
otop.onmouseup = function ()
{
clearInterval(timeup);
};
odown.onmousedown = function ()
{
timedown = setInterval( down , 50)
};
odown.onmouseup = function ()
{
clearInterval(timedown);
};
}
</script>
<style>
*{
margin:0px;
padding:0px;
list-style-type:none;
}
h2{
width:170px;
background:#F69;
color:#fff;
font-size:14px;
padding:5px;
border-top-left-radius:10px;
border-top-right-radius:10px;
margin:20px auto 0px;
text-align:center;
}
#content{
width:160px;
height:450px;
overflow:hidden;
padding:20px 10px;
border: 1px #eee solid;
position:relative;
margin:0 auto;
}
#top,#down{
width:100%;
height:20px;
position:absolute;
left:0px;
cursor:pointer;
z-index:1;
}
#top{
top:0px;
background:url(img/arrowUp.png) no-repeat center center #CCCCCC;
}
#down{
bottom:0px;
background:url(img/arrowDown.png) no-repeat center center #CCCCCC;
}
#content ul{
position:relative;
top:0px;
}
#content li{
border-bottom:1px dashed #CCC;
position:relative;
padding-bottom:5px;
}
#content h3{
font-size:14px;
line-height:28px;
}
#content .time{
padding-top:10px;
color:#666;
}
</style>
</head>
<body>
<h2>网站选项</h2>
<div id="content">
<div id="top"></div>
<ul>
<li>
<h3>标题一</h3>
<p>内容1</p>
<p class="time">12:00</p>
</li>
<li>
<h3>标题二</h3>
<p>内容2</p>
<p class="time">12:00</p>
</li>
<li>
<h3>标题三</h3>
<p>内容3</p>
<p class="time">12:00</p>
</li>
<li>
<h3>标题四</h3>
<p>内容4</p>
<p class="time">12:00</p>
</li>
<li>
<h3>标题五</h3>
<p>内容5</p>
<p class="time">12:00</p>
</li>
<li>
<h3>标题六</h3>
<p>内容6</p>
<p class="time">12:00</p>
</li>
<li>
<h3>标题七</h3>
<p>内容7</p>
<p class="time">12:00</p>
</li>
<li>
<h3>标题八</h3>
<p>内容8</p>
<p class="time">12:00</p>
</li>
<li>
<h3>标题九</h3>
<p>内容9</p>
<p class="time">12:00</p>
</li>
<li>
<h3>标题十</h3>
<p>内容10</p>
<p class="time">12:00</p>
</li>
</ul>
<div id="down"></div>
</div>
</body>
</html>
