V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
RangerWolf
V2EX  ›  问与答

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

  •  
  •   RangerWolf · 2014-01-29 09:16:16 +08:00 · 3139 次点击
    这是一个创建于 3955 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我们组的美工设计的效果,想了一天也想不出如何实现。。。特来此求助。[我连这种效果的名字是什么都不知道。。。]

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

    具体效果就是点击中间的带箭头的圆圈在a b两种界面直接进行转换
    18 条回复    1970-01-01 08:00:00 +08:00
    justfindu
        1
    justfindu  
       2014-01-29 09:52:38 +08:00
    这不就是手风琴么~ 只是开关tab换成了箭头而已~
    chairuosen
        2
    chairuosen  
       2014-01-29 10:01:40 +08:00
    灰色部分属于部分A,箭头和白色部分属于部分B,
    点箭头的时候改变B的定位。绝对定位也行,相对也行,最好用绝对定位。
    loading
        3
    loading  
       2014-01-29 10:17:09 +08:00 via iPhone
    $("layer").animate({marginTop:"50"},500);

    overflow:hidden;
    emric
        4
    emric  
       2014-01-29 10:18:16 +08:00
    box 给个 overflow: hidden, 再调整 margin-top 的负值.
    emric
        5
    emric  
       2014-01-29 10:21:02 +08:00
    发现我组合语言越来越有问题, 有人推荐我读几本书吗?
    loading
        6
    loading  
       2014-01-29 11:43:05 +08:00 via iPhone
    lz死了
    RangerWolf
        7
    RangerWolf  
    OP
       2014-01-29 15:23:20 +08:00
    @loading sorry 还没呢:) 今天基本上算是搞定这个效果了~ 只是效果还是不太理想。。。 用的还是基于bootstrap的手风琴的效果~ @justfindu

    @chairuosen 有例子程序么? 从来没玩过这么高级的界面效果。。。
    rayps
        8
    rayps  
       2014-01-29 15:28:46 +08:00
    设计师就是坑
    RangerWolf
        9
    RangerWolf  
    OP
       2014-01-29 16:30:03 +08:00
    @emric box 是什么?
    rayps
        10
    rayps  
       2014-01-29 16:47:05 +08:00
    写一个给你看看,是这样么
    http://codepen.io/RayPS/pen/wuLbq
    chairuosen
        11
    chairuosen  
       2014-01-29 17:27:18 +08:00
    RangerWolf
        12
    RangerWolf  
    OP
       2014-01-29 17:41:26 +08:00
    @chairuosen @rayps
    你们太犀利了! 非常感谢!
    loading
        13
    loading  
       2014-01-29 18:00:04 +08:00
    @RangerWolf 请使用“感谢回复者”,楼层:hover 后可见。
    emric
        14
    emric  
       2014-01-29 18:27:21 +08:00
    如果楼主找到答案了嗯? 我一直以为是这种效果...
    http://jsbin.com/ObaqOhoJ/1/edit
    P233
        15
    P233  
       2014-01-29 19:03:54 +08:00
    再来个 pure CSS 版本,just for fun

    http://jsbin.com/IRoDITek/1/
    RangerWolf
        16
    RangerWolf  
    OP
       2014-01-29 23:10:47 +08:00
    @emric 其实 我还真没看出太大区别。。。

    @P233 我看到用到一个 http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js 这能算是纯CSS么?
    P233
        17
    P233  
       2014-01-29 23:25:55 +08:00
    emric
        18
    emric  
       2014-01-30 00:13:03 +08:00
    @P233 nice! input 还能这样用!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3167 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 13:50 · PVG 21:50 · LAX 05:50 · JFK 08:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.