这是一个创建于 916 天前的主题，其中的信息可能已经有所发展或是发生改变。
 |
1
Pastsong 2022-06-27 16:22:21 +08:00
看代码啊，人家带 sourcemap 的源码都给你了
|
 |
2
ToHaveLight 2022-06-27 16:28:08 +08:00
这不就是个翻书效果嘛，百度一下有很多类似的插件
|
 |
3
OkabeRintaro OP @Pastsong @ToHaveLight 主要是假如说 有十几张图片，怎么屏幕第一页判断是要怎么摆放一两张，第二页摆放四五张
|
 |
4
ccyu220 2022-06-27 16:43:59 +08:00
这不就是 H5 秀模板编辑器的玩意吗，这就不是瀑布流做出来的东西。
|
|
5
OkabeRintaro OP @Pastsong 呃呃不好意思，我是前端小菜鸡，请问这个是可以扒下来的吗？怎么扒？扒完怎么看，这种东西上线后不是都会混淆的吗？最后可以再换为 vue 模式吗？我上面这些问题都百度过，但都看不懂，所以还是来虚心请教下。
|
|
6
OkabeRintaro OP @ccyu220 那是什么，可以推荐下吗？ 是会生成代码的吗？
|
|
7
OkabeRintaro OP @ccyu220 简单看了一下这个 H5 编辑器，摆放好图片，就只有一个页面给我，也没代码啊，如何融入到公司 App 里面呀？
|
 |
8
Ccbeango 2022-06-27 17:26:20 +08:00
楼上老哥给你提示了啊 有 sourcemap
打开控制台，点 sources -> 点 page -> 点 webpack:// 可以看到源码 |
 |
9
HAYWAEL 2022-06-27 17:30:11 +08:00
如果让我实现的话。一个是翻书页的效果 没想象中的难，之前实现过；然后就是单叶排版，我可能会丢个富文本编辑器过去 让运营或着其他去自己配置。
|
|
10
OkabeRintaro OP |
 |
11
cyrbuzz 2022-06-27 18:33:50 +08:00
大概是这样：
1. 每个页数用 z-index 叠加在同一个位置上。关键代码是：`position: absolute; z-index: 1`，z-index 按倒序排。 2. 翻页时候用 transform ，父节点控制整体向左移动，子节点再次控制除父节点以外的内容向右移动相同的距离，这时候就会看到左侧内容不变但右边内容渐现的效果，关键代码是双层 DOM：`<div style="transform: translate(-100px, 0)"><div style="transform: translate(100px, 0)"></div></div>`。 3. 增加一个翻页的效果，这个原网页用的 canvas 画的，不过他那个看起来也比较简陋，可以让你们设计切一个图跟着移动增加宽度就好了。 |
|
12
OkabeRintaro OP @cyrbuzz 谢谢大佬提供内功修炼，那外功的布局我看了源码好像有 30 种模板，又是怎么实现的呀
|
 |
13
zhw2590582 2022-06-27 20:30:41 +08:00 via iPhone
你这个问题问得太广泛了，你在问怎么写出整个效果，最好是别人帮你完整地写出来一样，其实不如去 github 找找现有的插件
|
|
14
cyrbuzz 2022-06-27 21:11:36 +08:00
|
|
15
OkabeRintaro OP |
 |
16
xiaojun1994 2022-06-28 09:45:48 +08:00
看着是 canvas 画的
|
|
17
OkabeRintaro OP |
Select Language