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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2226 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

2018-11-25 20:18:09 +08:00 via Android

有点厉害

gzlock

2018-11-25 20:23:09 +08:00 via Android

有大佬可以讲解一下核心原理吗

Jackliu

2018-11-25 20:44:21 +08:00

看下背景图就知道了
https://i.loli.net/2018/11/25/5bfa45b4b3f27.jpg

rabbbit

2018-11-25 21:30:17 +08:00

原理就是给滑动条绑了个 input 事件,修改背景坐标
把那个 input 事件删了就动不了了

fanhaipeng0403

2018-11-25 21:35:25 +08:00

@rabbbit 能问下你这个 gif 是怎么生成的么，有 chrome 插件么？

Everyman

2018-11-25 21:39:37 +08:00

@fanhaipeng0403 这种产品图一般是设计师做好导出给开发人员直接使用的吧。

fanhaipeng0403

2018-11-25 21:41:00 +08:00

@yiranHZT 我的意思是说，他打开 console 然后各种操作，把这个过程录下来，然后生成 gif，发给别人展示过程的工具是什么。。。

crab

2018-11-25 21:49:37 +08:00

@fanhaipeng0403 gifcam 或者 licecap

barryng67

2018-11-25 22:11:24 +08:00 via iPhone

这个只是换图片吧？以为是 three.js 那种。

idtaanlcoe

2018-11-26 01:44:01 +08:00 via Android

真的没有任何 js 吗

gzlock

2018-11-26 03:20:31 +08:00 via Android

我以为是 CSS 实现监听 input 事件那种“纯 CSS ”

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

2018-11-26 06:52:24 +08:00

@Mutoo 而 input 的 value 属性只能作为初始值使用，当你移动这个 slide 的时候，value 并不会跟着变化。所以还是需要 js 来辅助更新这个 value 属性。

Tory

2018-11-26 09:58:38 +08:00

标题党,我还以为一点 js 都没有呢

Outshine

2018-11-26 10:20:38 +08:00

重新定义了“纯 CSS ”

flyingkid

2018-11-26 10:34:53 +08:00

这种情况适用极端情况。否则我们用 js 监听 onchange 动态来的更简单和更容易维护。