作者jack86 (榮)
看板Ajax
標題Re: [問題] 如何自製橫向選單
時間Tue Mar 6 04:11:22 2012
※ 引述《oao54bb (央)》之銘言：
: 我有一個動態的相片資料，會根據搜尋結果，則顯示的筆數也不同。
: 所以，我想做一個橫向選單的元件，來收納這些圖片資料。
: 希望如下
: 1. 寬度貼緊螢幕大小
: 2. 捲軸是依照資料筆數多寡，而改變長度
: (我之前用jQuery UI，他只能訂好寬度，實在不便...)
: 3. 自行設計捲軸樣式。
: 不知道有沒有大大們，有相關作法或套件呢?
: 我有找過幾個套件，都好不適用，希望有機會能自己做..
: 不知道有沒有製作的方法或教學
┌─┬────────────┬─┐
│ │┌─┐┌─┐┌─┐┌─┐│ │
│ ││ ││ ││ ││ ││ │
│＜│└─┘└─┘└─┘└─┘│＞│
│ ├────────────┤ │
│ │══●═════════│ │
└─┴────────────┴─┘
你說的應該是這東西吧?
有一個很簡單的方法
<div1> // 長度100%, overflow:hidden;
<div2> // 長度=所有圖片總長度 或多一點點
<img/> // 所有被選擇的圖片
</div>
</div>
div2 再搭配 jQuery 的 .animate({marginleft:"距離"},時間);
click "左" 或 "右" 鍵時移動div2可產生圖片列移動效果。
scrollbar也用jQuery的套件, 每次移動觸發div2事件即可..
更簡單的就是, div1 的overflow-x:scroll; overflow-y:hidden;
不過個人覺得這樣就不那麼美觀~~~
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 1.161.129.127