網(wǎng)頁(yè)特效代碼模板無憂>網(wǎng)頁(yè)特效>圖片特效特效代碼>

可控的縱向圖片滾動(dòng)_圖片特效特效

縱向的圖片滾動(dòng)，上下各有控制按鈕，點(diǎn)擊圖片框內(nèi)的圖片就可以向上或向下滾動(dòng)，滾動(dòng)步升請(qǐng)根據(jù)你的網(wǎng)頁(yè)布局和其它要求自行修改。

<title>可控的縱向圖片滾動(dòng)</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">

</style>
<div   id="d83w8lw"   class="hpworktext">
  <div   id="m3c9d4m"   class="" style="cursor:pointer" onclick="up()">向上</div>
    <div   class="1d4ftfi"   id=demo style=" overflow:hidden; height:210px; width:100%; margin:auto; overflow: scroll; overflow-x:hidden;">
      <div   id="m085i1s"   class="hpworkimg">1</div>
      <div   id="qnneunf"   class="hpworkimg">2</div>
      <div   id="pnm5yei"   class="hpworkimg">3</div>
      <div   id="gij5tty"   class="hpworkimg">4</div>
      <div   id="euz9hbv"   class="hpworkimg">5</div>
      <div   id="bojyxzz"   class="hpworkimg">6</div>
      <div   id="n1qekw4"   class="hpworkimg">11</div>
      <div   id="boicd8a"   class="hpworkimg">12</div>
      <div   id="un0d3i0"   class="hpworkimg">13</div>
      <div   id="xtoejz3"   class="hpworkimg">14</div>
      <div   id="gxsictu"   class="hpworkimg">15</div>
      <div   id="uggbsis"   class="hpworkimg">16</div>
      <div   id="olvqvpp"   class="hpworkimg">21</div>
      <div   id="z09vd1z"   class="hpworkimg">22</div>
    </div>
  <div   id="jqv4eut"   class="" style="cursor:pointer" onclick="down()">向下</div>
  </div>

所屬頻道：圖片特效特效/更新時(shí)間：2012-11-28

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)圖片特效特效：

可控的縱向圖片滾動(dòng)_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些