V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
pcwow
V2EX  ›  分享创造

写了个单屏页面切换效果

  •  
  •   pcwow · 2015-07-12 13:14:49 +08:00 · 4204 次点击
    这是一个创建于 3422 天前的主题,其中的信息可能已经有所发展或是发生改变。
    主要基于html2canvas生成整个页面的"截图",再对生成的canvas分解。

    需要等待完全加载完毕才能操作(滚动条消失),不然会错位
    demo: http://github.czli.me/page-scroll
    源码: https://github.com/pcwow789/page-scroll



    第 1 条附言  ·  2015-07-12 22:18:57 +08:00
    优化了下生成逻辑,现在不会再有滚动条而且支持自适应了~
    20 条回复    2015-07-18 20:06:06 +08:00
    kaikai5601
        1
    kaikai5601  
       2015-07-12 13:49:16 +08:00   ❤️ 1
    很酷~
    jas0ndyq
        2
    jas0ndyq  
       2015-07-12 14:01:53 +08:00   ❤️ 1
    star
    yeah2109
        3
    yeah2109  
       2015-07-12 17:34:27 +08:00   ❤️ 1
    感觉往上滚动的时候有错位?
    fyl00
        4
    fyl00  
       2015-07-12 18:04:21 +08:00   ❤️ 1
    网上滚确实有错位,千万不要告诉我是这么设计的
    luoway
        5
    luoway  
       2015-07-12 18:53:27 +08:00   ❤️ 1
    如果切换效果丰富且随机,那就太棒了
    pcwow
        6
    pcwow  
    OP
       2015-07-12 19:40:45 +08:00
    @yeah2109
    @fyl00
    用的是什么浏览器?具体是哪里错位?比较懒没有测试太多浏览器。。。
    pcwow
        7
    pcwow  
    OP
       2015-07-12 19:43:11 +08:00
    @luoway
    是想这么做来着,什么时候闲了再补上~
    Garwih
        8
    Garwih  
       2015-07-12 19:54:49 +08:00   ❤️ 1
    canvas 生成图片之后,再改变窗口大小,这时候上滚就会感觉错位。
    比如在页面加载完成之后,再按 F12 查看代码,这时候窗口大小改变了,文字上下的距离也改变了,而 canvas 生成的图片大小没变。
    pcwow
        9
    pcwow  
    OP
       2015-07-12 21:14:10 +08:00
    @Garwih
    嗯,确实是这样的,现在只在加载页面的时候生成了一次,没有做自适应
    Daddy
        10
    Daddy  
       2015-07-12 21:21:16 +08:00   ❤️ 1
    收藏+感谢+支持一下
    ledkk
        11
    ledkk  
       2015-07-13 00:34:42 +08:00   ❤️ 1
    很不错
    wsph123
        12
    wsph123  
       2015-07-13 09:44:12 +08:00   ❤️ 1
    好炫酷!!
    arens
        13
    arens  
       2015-07-13 14:58:18 +08:00   ❤️ 1
    发现BUG,切换几个页面后,如果刷新再切换,会丢失切换效果
    pcwow
        14
    pcwow  
    OP
       2015-07-13 17:13:06 +08:00
    @arens
    不知道为什么,刷新后样式计算有时候会不正确,导致截取到的canvas也是样式不正确的,现在的解决方式是切换后判断当前页生成的canvas样式是否正确,不正确重新生成
    deathscythe
        15
    deathscythe  
       2015-07-13 17:59:43 +08:00   ❤️ 1
    建议在body 或html 上加个overflow:hidden
    Mac上滚动怪怪的,就像拽动的样子
    yeah2109
        16
    yeah2109  
       2015-07-17 00:11:26 +08:00 via Android   ❤️ 1
    能不能加上滑屏滚动?
    xihesi
        17
    xihesi  
       2015-07-17 11:03:15 +08:00   ❤️ 1
    鼠标滚轮坏了的就笑了,我就是
    pcwow
        18
    pcwow  
    OP
       2015-07-18 00:41:43 +08:00
    @yeah2109
    滑屏不考虑了(主要是懒。。
    @xihesi
    新加了方向键控制
    abmin521
        19
    abmin521  
       2015-07-18 18:59:36 +08:00 via Android
    手机浏览器不行
    pcwow
        20
    pcwow  
    OP
       2015-07-18 20:06:06 +08:00
    @abmin521
    是的,暂时没有支持手机浏览器的打算
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1221 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 18:20 · PVG 02:20 · LAX 10:20 · JFK 13:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.