RangerWolf
V2EX  ›  问与答

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

  •  
  •   RangerWolf · Jan 29, 2014 · 3640 views
    This topic created in 4513 days ago, the information mentioned may be changed or developed.
    我们组的美工设计的效果,想了一天也想不出如何实现。。。特来此求助。[我连这种效果的名字是什么都不知道。。。]

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

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

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

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

    http://jsbin.com/IRoDITek/1/
    RangerWolf
        16
    RangerWolf  
    OP
       Jan 29, 2014
    @emric 其实 我还真没看出太大区别。。。

    @P233 我看到用到一个 http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js 这能算是纯CSS么?
    P233
        17
    P233  
       Jan 29, 2014
    emric
        18
    emric  
       Jan 30, 2014
    @P233 nice! input 还能这样用!
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5639 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 49ms · UTC 01:35 · PVG 09:35 · LAX 18:35 · JFK 21:35
    ♥ Do have faith in what you're doing.