最近网上似乎开始流行滑动效果, 比如说M$主页上的这个. 虽然M$的这个是为了配合Metro的主题, 但是滑动展示却确实广泛应用于各大网站的主页上. 网上实现滑动效果的js插件一抓一大把, 但是既然我们用了jQuery做Ajax, 何不想想jQuery框架内就能解决的方案.

解决大体思路是: 在一个wrapper div里放N个等大的sub div, 并列放置, 多余部分不显示, 滑动时改变各个sub div的水平位置即可实现slide. 当然为了做成"滑动", 要用到jQuery的.animate()方法(当然别的框架也可以).

并列放置一般来说是把每个sub div的float设成left, 不过float其实并不是并列排版的最佳方案, 因为sub div从wrapper中"浮"了出来不再属于wrapper, 造成wrapper包不住sub. 需在某处应用clear, 典型的方法是新建个空div应用clear: both. 这样做未免有点Hack的味道, 空的div也不容易理解.

另一个方法是将每个sub div的position设成relative, 然后将后一个的top设成-300px(如每个sub div高度为300px). 这里的top是相对于前一个div而言的, 所以后面第二个的top应设为-600px. 关于relative的排版参见这里.

CSS3中对于元素并列放置有更好的解决方案: display: inline-block. 允许像div这种块级元素拥有inline的特性. 强烈建议对于块级元素的并列排放使用inline-block而不是float.

我用了第二种方法(虽然事实上第三种方法更好), 不过怎么排版其实并不重要, 排成一排就行了.

对于wrapper, 用overflow: hidden隐藏多余的sub div.

向左滑动时, 在js中对所有sub div调用.animate({"left", "-=300px"}).
向右滑动时, 在js中对所有sub div调用.animate({"left", "+=300px"}).

未防滑过头, 滑动之前需判断是否已到底.

其它方法可能调用.animate()时渐变的属性略有不同, 相应调整即可. 不过.animate()可调的属性限于几个可以连续变化的数值属性, 具体可参阅jQuery的文档.

简言之, 选择一个合适的方法并列排版sub div, 遮掉多余部分, 滑动时左右调整位置, 就这么简单.

附: Source Code