V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
guoqiao
V2EX  ›  设计

有什么前端库可以实现 wookmark 这种看图效果?

  •  
  •   guoqiao · 2014-01-12 12:35:30 +08:00 · 3268 次点击
    这是一个创建于 3970 天前的主题,其中的信息可能已经有所发展或是发生改变。
    http://www.wookmark.com/

    wookmark 是一个类似于 pinterest 的图片分享网站.
    并且在github上有开源库: https://github.com/GBKS/Wookmark-jQuery

    不过, 我感兴趣的并不是首页的图片浮动布局, 这样的东西很多了.
    我想问的是查看具体图片的效果是如何做出来的:

    在首页点击某张图片后, 看起来新页面是直接浮在首页上的, 首页成了背景.而 url 也变化了.
    关闭图片后, 首页仍在原来位置.
    以我肤浅的前端知识, 这类似于 bootstrap 的 modal, 也类似于查看图片的 lightbox 效果, 但是更复杂一些.
    现在 pinterest 也是这样的查看效果. 它的好处是, 用户在首页的无限瀑布流中滚动, 发现感兴趣的内容并查看完后, 不必重新加载首页并滚动.

    由于本人主要做后端, 对前端都是摸着石头过河, 对于这样高大上的设计有点摸不着头脑.
    还请前端达人指点迷津.
    6 条回复    1970-01-01 08:00:00 +08:00
    shiye515
        1
    shiye515  
       2014-01-12 12:46:02 +08:00 via Android
    这技术叫pushState,改变url但不刷新页面。
    guoqiao
        2
    guoqiao  
    OP
       2014-01-12 12:52:13 +08:00
    @shiye515 URL 那个问题我知道的. 我想知道浮动的效果是如何做到的.
    clippit
        3
    clippit  
       2014-01-12 13:12:00 +08:00   ❤️ 1
    DOM 里新插入一个节点

    #lightbox {
    position: fixed;
    width: 100%;
    background-color: rgba(0,0,0,.85);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    z-index: 105;
    opacity: 1;
    -moz-transition: opacity 0.15s ease-out;
    -o-transition: opacity 0.25s ease-out;
    -webkit-transition: opacity 0.25s ease-out;
    -ms-transition: opacity 0.25s ease-out;
    transition: opacity 0.25s ease-out;
    }
    learnshare
        4
    learnshare  
       2014-01-12 13:30:43 +08:00
    弹出窗口是类似于 modal,改变 URL 是 pushState
    crossmaya
        5
    crossmaya  
       2014-01-13 10:14:35 +08:00
    github上有开源的history库
    guoqiao
        6
    guoqiao  
    OP
       2014-01-13 12:27:28 +08:00
    @clippit 谢谢你帮我找到了最关键的部分. 我已经搞定了: http://dev.writehere.com/. 非常感谢.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1014 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 21:06 · PVG 05:06 · LAX 13:06 · JFK 16:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.