可控的纵向图片滚动

<title>可控的纵向图片滚动</title>

<script>

function up(){

var iup=demo.scrollTop;

var iup1=demo.scrollTop;

while (iup>iup1-210) {

iup=iup-5;

demo.scrollTop=iup;

}}

function down(){

var iup=demo.scrollTop;

var iup1=demo.scrollTop;

while (iup<iup1+210) {

iup=iup+5;

demo.scrollTop=iup;

}}

</script>

<style type="text/css">

<!--

.hpworktext {

height: 250px;

width: 320px;

overflow: hidden;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

line-height: 20px;

}

.hpworktext #demo .hpworkimg {

background-color: #999999;

display: block;

width: 140px;

float: left;

height: 100px;

margin-top: 3px;

margin-right: 5px;

margin-bottom: 2px;

}

-->

</style>

<div class="hpworktext">

<div class="" style="cursor:pointer" onclick="up()">向上</div>

<div id=demo style=" overflow:hidden; height:210px; width:100%; margin:auto; overflow: scroll; overflow-x:hidden;">

<div class="hpworkimg">1</div>

<div class="hpworkimg">2</div>

<div class="hpworkimg">3</div>

<div class="hpworkimg">4</div>

<div class="hpworkimg">5</div>

<div class="hpworkimg">6</div>

<div class="hpworkimg">11</div>

<div class="hpworkimg">12</div>

<div class="hpworkimg">13</div>

<div class="hpworkimg">14</div>

<div class="hpworkimg">15</div>

<div class="hpworkimg">16</div>

<div class="hpworkimg">21</div>

<div class="hpworkimg">22</div>

</div>

<div class="" style="cursor:pointer" onclick="down()">向下</div>

</div>