纵向的图片滚动,上下各有控制按钮,点击图片框内的图片就可以向上或向下滚动,滚动步升请根据你的网页布局和其它要求自行修改。
<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> |
|