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

纯 CSS 实现的 360 度产品查看器

  •  
  •   picturepan2 ·
    picturepan2 · 2018-11-25 20:06:27 +08:00 via iPhone · 3906 次点击
    这是一个创建于 1950 天前的主题,其中的信息可能已经有所发展或是发生改变。
    Spectre.css 框架增加了新的纯 CSS 实现的组件:360 度查看器( 360-Degree Viewer ),支持桌面和移动端。

    演示: https://picturepan2.github.io/spectre/experimentals/viewer-360.html
    16 条回复    2018-11-26 10:34:53 +08:00
    Bryan0Z
        1
    Bryan0Z  
       2018-11-25 20:18:09 +08:00 via Android
    有点厉害
    gzlock
        2
    gzlock  
       2018-11-25 20:23:09 +08:00 via Android
    有大佬可以讲解一下核心原理吗
    Jackliu
        3
    Jackliu  
       2018-11-25 20:44:21 +08:00
    rabbbit
        4
    rabbbit  
       2018-11-25 21:30:17 +08:00
    原理就是给滑动条绑了个 input 事件,修改背景坐标
    把那个 input 事件删了就动不了了
    fanhaipeng0403
        5
    fanhaipeng0403  
       2018-11-25 21:35:25 +08:00
    @rabbbit 能问下你这个 gif 是怎么生成的么 ,有 chrome 插件么?
    yiranHZT
        6
    yiranHZT  
       2018-11-25 21:39:37 +08:00
    @fanhaipeng0403 这种产品图一般是设计师做好导出给开发人员直接使用的吧。
    fanhaipeng0403
        7
    fanhaipeng0403  
       2018-11-25 21:41:00 +08:00
    @yiranHZT 我的意思 是说,他打开 console 然后各种操作,把这个过程录下来,然后生成 gif,发给别人展示过程的工具是什么。。。
    crab
        8
    crab  
       2018-11-25 21:49:37 +08:00   ❤️ 1
    @fanhaipeng0403 gifcam 或者 licecap
    barryng67
        9
    barryng67  
       2018-11-25 22:11:24 +08:00 via iPhone
    这个只是换图片吧?以为是 three.js 那种。
    idtaanlcoe
        10
    idtaanlcoe  
       2018-11-26 01:44:01 +08:00 via Android
    真的没有任何 js 吗
    gzlock
        11
    gzlock  
       2018-11-26 03:20:31 +08:00 via Android
    我以为是 CSS 实现监听 input 事件那种“纯 CSS ”
    Mutoo
        12
    Mutoo  
       2018-11-26 06:48:10 +08:00
    显示层本身是纯 CSS 的。用的是「属性选择器(value=15)」与「相邻选择器(+)」结合,将 input 元素放在 image 前面,然后通过 input 的 value 属性 来显示不同的 background-image:

    .viewer-360 .viewer-slider[value="15"]+.viewer-image
    Mutoo
        13
    Mutoo  
       2018-11-26 06:52:24 +08:00
    @Mutoo 而 input 的 value 属性只能作为初始值使用,当你移动这个 slide 的时候,value 并不会跟着变化。所以还是需要 js 来辅助更新这个 value 属性。
    Tory
        14
    Tory  
       2018-11-26 09:58:38 +08:00
    标题党,我还以为一点 js 都没有呢
    Outshine
        15
    Outshine  
       2018-11-26 10:20:38 +08:00   ❤️ 1
    重新定义了“纯 CSS ”
    flyingkid
        16
    flyingkid  
       2018-11-26 10:34:53 +08:00
    这种情况适用极端情况。否则我们用 js 监听 onchange 动态来的更简单和更容易维护。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2817 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 15:24 · PVG 23:24 · LAX 08:24 · JFK 11:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.