javascript 水平捲動選單

根據這一篇這一篇的原理

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

這是javascript的部份

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

這是html的部份
要設定overflow:hidden;及寬度
要多包一個div 才能捲喔

<div style="border:1px solid #c3c3c3;height:20px;width:50px;">
  <div id="box" style="overflow:hidden;height:20px;width:50px;">
    <div style="width:350px;">
      <div style="width:50px;float:left;">exp01</div>
      <div style="width:50px;float:left;">exp02</div>
      <div style="width:50px;float:left;">exp03</div>
      <div style="width:50px;float:left;">exp04</div>
      <div style="width:50px;float:left;">exp05</div>
      <div style="width:50px;float:left;">exp06</div>
      <div style="width:50px;float:left;">exp07</div>
    </div>
  </div>
</div>
<a style="cursor:pointer;" onclick="hz_slidebar(-1,'box');">左</a>&amp;nbsp;
<a style="cursor:pointer;" onclick="hz_slidebar(1,'box');">右</a>

按這裡可以看範例

我真的沒有拖台錢 真的沒有!!XD

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

javascript 水平捲動選單 有 2 則回應

  1. Roji 說道:

    有辦法做出水平捲動選單+水平輪撥嗎?
    我試了很久都做不出來…

  2. hsin 說道:

    水平輪播的可能可以參考這篇的作法
    http://blog.hsin.tw/2008/javascript-vertical-carousel/
    但如果要 水平捲動選單+水平輪撥 參在一起
    我之前好像試過
    已經超出我的能力範圍XD
    我還想不到辦法把他們兩個放一起
    或許可以找找看有沒有人已經寫成jquery的plugin

發表迴響

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

*

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