作者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