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