javascript 垂直捲動選單

根據前一篇的原理

可以使用同樣的方法製作捲動選單

這是javascript的部份

//一次捲動的高度 這邊是跟外面的div一樣高
var ft = 50;
function slidebar(n,t)
{
  //一次捲動的px,越大越快但也越不連貫
  var s=2;
  //控制往下或往上捲
  document.getElementById(t).scrollTop += n*s;
  ft=ft-s;
  //上面每次會減掉s,減到0時就會停止
  if(ft==0)
  //停止時再重新設定成原本的高度
    ft= 50;
  else
  //未停止時,就繼續執行,後面的數字是delay的毫秒,數字越大越慢
    setTimeout("slidebar("+n+",'"+t+"')",1);
}

這是html的部份
要設定overflow:hidden;及高度

<div id="box" style="overflow:hidden;height:50px;">
  <div style="height:25px;">exp01</div>
  <div style="height:25px;">exp02</div>
  <div style="height:25px;">exp03</div>
  <div style="height:25px;">exp04</div>
  <div style="height:25px;">exp05</div>
  <div style="height:25px;">exp06</div>
</div>
<a style="cursor:pointer;" onclick="slidebar(-1,'box');">往上</a>
<a style="cursor:pointer;" onclick="slidebar(1,'box');">往下</a>

按這裡可以看範例

注意:scrollTop、scrollLeft有些瀏覽器不支援(不過ie跟fx都有)
本篇發表於 javascript 並標籤為 , 。將永久鏈結加入書籤。

javascript 垂直捲動選單 有 8 則回應

  1. 通告: Life["Breathing"] » javascript 水平捲動選單

  2. fong2755 說道:

    大大安安
    請問網頁中要如何用勒?
    感謝

  3. hsin 說道:

    點每塊程式碼左上角的copy to clipboard直接複製起來
    或是按view plain
    會跳出一頁只有純文字的程式碼

    把第一段的貼在<script></script>裡
    再放在<head></head>或<body></body>裡
    第二段貼在<body></body>裡
    基本上就可以動囉
    再照你需要的功能更改裡面的東西囉

    或是按文章尾有個範例連結
    連過去以後直接看原始檔也是可以的

  4. 小菜菜 說道:

    先謝謝大大慷慨分享創作!若想改為簡易的捲動軸使用,於onMouseOver連續觸發捲動並於onMouseOut中止,要如何修改呢?萬分感激!

  5. 小菜菜 說道:

    另外若想自動判定是否捲動,即到達頁尾的時候"往下"鍵變成display:0,反之亦然,能否撥冗指點呢,五體投地再謝!

  6. Fang 說道:

    請問這個也可以運用在寫flash嗎?

  7. admin 說道:

    我想沒辦法直接套用
    flash會有相同的東西
    但是寫法會不一樣

發表迴響

您的電子郵件位址並不會被公開。 必要欄位標記為 *

*

您可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>