写了个单屏页面切换效果

主要基于html2canvas生成整个页面的"截图"，再对生成的canvas分解。

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

yeah2109

2015-07-12 17:34:27 +08:00

感觉往上滚动的时候有错位？

fyl00

2015-07-12 18:04:21 +08:00

网上滚确实有错位，千万不要告诉我是这么设计的

luoway

2015-07-12 18:53:27 +08:00

如果切换效果丰富且随机，那就太棒了

pcwow

2015-07-12 19:40:45 +08:00

@yeah2109
@fyl00
用的是什么浏览器？具体是哪里错位？比较懒没有测试太多浏览器。。。

pcwow

2015-07-12 19:43:11 +08:00

@luoway
是想这么做来着，什么时候闲了再补上~

Garwih

2015-07-12 19:54:49 +08:00

canvas 生成图片之后，再改变窗口大小，这时候上滚就会感觉错位。
比如在页面加载完成之后，再按 F12 查看代码，这时候窗口大小改变了，文字上下的距离也改变了，而 canvas 生成的图片大小没变。

pcwow

2015-07-12 21:14:10 +08:00

@Garwih
嗯，确实是这样的，现在只在加载页面的时候生成了一次，没有做自适应

arens

2015-07-13 14:58:18 +08:00

发现BUG，切换几个页面后，如果刷新再切换，会丢失切换效果

pcwow

2015-07-13 17:13:06 +08:00

@arens
不知道为什么，刷新后样式计算有时候会不正确，导致截取到的canvas也是样式不正确的，现在的解决方式是切换后判断当前页生成的canvas样式是否正确，不正确重新生成

deathscythe

2015-07-13 17:59:43 +08:00

建议在body 或html 上加个overflow:hidden
Mac上滚动怪怪的，就像拽动的样子

xihesi

2015-07-17 11:03:15 +08:00

鼠标滚轮坏了的就笑了，我就是

pcwow

2015-07-18 00:41:43 +08:00

@yeah2109
滑屏不考虑了（主要是懒。。
@xihesi
新加了方向键控制

pcwow

2015-07-18 20:06:06 +08:00

@abmin521
是的，暂时没有支持手机浏览器的打算

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.