V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
OkabeRintaro
V2EX  ›  问与答

[前端开发] 如何仿照下面这种布局和滑动效果?

  •  
  •   OkabeRintaro · 97 天前 · 995 次点击
    这是一个创建于 97 天前的主题,其中的信息可能已经有所发展或是发生改变。
    17 条回复    2022-06-28 11:28:37 +08:00
    Pastsong
        1
    Pastsong  
       97 天前
    看代码啊,人家带 sourcemap 的源码都给你了
    ToHaveLight
        2
    ToHaveLight  
       97 天前
    这不就是个翻书效果嘛,百度一下有很多类似的插件
    OkabeRintaro
        3
    OkabeRintaro  
    OP
       97 天前
    @Pastsong @ToHaveLight 主要是假如说 有十几张图片,怎么屏幕第一页判断是要怎么摆放一两张,第二页摆放四五张
    ccyu220
        4
    ccyu220  
       97 天前
    这不就是 H5 秀模板编辑器的玩意吗,这就不是瀑布流做出来的东西。
    OkabeRintaro
        5
    OkabeRintaro  
    OP
       97 天前
    @Pastsong 呃呃不好意思,我是前端小菜鸡,请问这个是可以扒下来的吗?怎么扒?扒完怎么看,这种东西上线后不是都会混淆的吗?最后可以再换为 vue 模式吗?我上面这些问题都百度过,但都看不懂,所以还是来虚心请教下。
    OkabeRintaro
        6
    OkabeRintaro  
    OP
       97 天前
    @ccyu220 那是什么,可以推荐下吗? 是会生成代码的吗?
    OkabeRintaro
        7
    OkabeRintaro  
    OP
       97 天前
    @ccyu220 简单看了一下这个 H5 编辑器,摆放好图片,就只有一个页面给我,也没代码啊,如何融入到公司 App 里面呀?
    Ccbeango
        8
    Ccbeango  
       97 天前
    楼上老哥给你提示了啊 有 sourcemap
    打开控制台,点 sources -> 点 page -> 点 webpack:// 可以看到源码
    HAYWAEL
        9
    HAYWAEL  
       97 天前
    如果让我实现的话。一个是翻书页的效果 没想象中的难,之前实现过;然后就是单叶排版,我可能会丢个富文本编辑器过去 让运营或着其他去自己配置。
    OkabeRintaro
        10
    OkabeRintaro  
    OP
       97 天前
    @Ccbeango 看到了 已经放到编辑器里了。
    @HAYWAEL 富文本编辑器?
    cyrbuzz
        11
    cyrbuzz  
       97 天前
    大概是这样:

    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 画的,不过他那个看起来也比较简陋,可以让你们设计切一个图跟着移动增加宽度就好了。
    OkabeRintaro
        12
    OkabeRintaro  
    OP
       97 天前
    @cyrbuzz 谢谢大佬提供内功修炼,那外功的布局我看了源码好像有 30 种模板,又是怎么实现的呀
    zhw2590582
        13
    zhw2590582  
       97 天前 via iPhone
    你这个问题问得太广泛了,你在问怎么写出整个效果,最好是别人帮你完整地写出来一样,其实不如去 github 找找现有的插件
    cyrbuzz
        14
    cyrbuzz  
       97 天前
    @OkabeRintaro

    啥外功模板= =。
    OkabeRintaro
        15
    OkabeRintaro  
    OP
       97 天前
    @zhw2590582 哎 基础不牢,地动山摇。 经验太少,难以思考
    @cyrbuzz 我头脑混乱了,我也不知道我要问的是啥了 - . -、、、、、
    xiaojun1994
        16
    xiaojun1994  
       97 天前
    看着是 canvas 画的
    OkabeRintaro
        17
    OkabeRintaro  
    OP
       97 天前
    @Pastsong @Ccbeango 你好,获取到之后,能否在自己电脑运行呢? 我看源码看到头晕,想跑起来运行下
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1942 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 49ms · UTC 06:05 · PVG 14:05 · LAX 23:05 · JFK 02:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.