作者oao54bb (央)
看板Ajax
標題Re: [問題] 如何自製橫向選單
時間Tue Mar 6 07:43:41 2012
首先非常感謝!!
看到有人懂我得意思!! (還畫了圖,簡直感動)
在下已經非常了解意思了,
但還有一個小問題,
在<div2> 部分
由於我的照片是動態來源,
我先設總圖片長度,會發生一些問題
http://ppt.cc/6W~y
如圖
所以該怎麼讓裝載圖片的捲軸容器,可以隨著資料多寡改變呢?
(就剩這個問題了..)
※ 引述《jack86 (榮)》之銘言:
: ※ 引述《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;
: 不過個人覺得這樣就不那麼美觀~~~
--
Blog
http://oao54bb.blogspot.com/
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 123.240.34.150
1F:→ jack86:不需要先設總長度阿...讀取圖片的時候再設定就好... 03/06 08:11
2F:→ jack86:例如這次讀取n張圖, 每張圖寬80px, 就設定80*n就可以了... 03/06 08:13
3F:→ oao54bb:除了感謝還是感謝!極力在思考製作中 03/06 22:23
4F:推 fbp123000:有個幻燈片js引擎叫noobslide個人覺得很不錯Y 03/09 02:51