求助： 网页如何实现类似火车开关窗口的效果？

[RangerWolf]

我们组的美工设计的效果，想了一天也想不出如何实现。。。特来此求助。[我连这种效果的名字是什么都不知道。。。]

v2好像不能直接贴图上来。
放到这里了：
http://doubanvideo-doubanvideoimg.stor.sinaapp.com/a.png
http://doubanvideo-doubanvideoimg.stor.sinaapp.com/b.png

具体效果就是点击中间的带箭头的圆圈在a b两种界面直接进行转换

[justfindu]

这不就是手风琴么~ 只是开关tab换成了箭头而已~

[chairuosen]

灰色部分属于部分A，箭头和白色部分属于部分B，
点箭头的时候改变B的定位。绝对定位也行，相对也行，最好用绝对定位。

[loading]

$("layer").animate({marginTop:"50"},500);

overflow:hidden;

[emric]

box 给个 overflow: hidden, 再调整 margin-top 的负值.

[emric]

发现我组合语言越来越有问题, 有人推荐我读几本书吗?

[loading]

lz死了

[RangerWolf]

@loading sorry 还没呢:) 今天基本上算是搞定这个效果了~ 只是效果还是不太理想。。。 用的还是基于bootstrap的手风琴的效果~ @justfindu

@chairuosen 有例子程序么？ 从来没玩过这么高级的界面效果。。。

[rayps]

设计师就是坑

[RangerWolf]

@emric box 是什么？

[rayps]

写一个给你看看，是这样么
http://codepen.io/RayPS/pen/wuLbq

[chairuosen]

@RangerWolf http://jsbin.com/ImABehEr/8

[RangerWolf]

@chairuosen @rayps
你们太犀利了！ 非常感谢！

[loading]

@RangerWolf 请使用“感谢回复者”，楼层:hover 后可见。

[emric]

如果楼主找到答案了嗯? 我一直以为是这种效果...
http://jsbin.com/ObaqOhoJ/1/edit

[P233]

再来个 pure CSS 版本，just for fun

http://jsbin.com/IRoDITek/1/

[RangerWolf]

@emric 其实 我还真没看出太大区别。。。

@P233 我看到用到一个 http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js 这能算是纯CSS么？

[P233]

@RangerWolf http://leaverou.github.io/prefixfree/

[emric]

@P233 nice! input 还能这样用!