这是一个创建于 2608 天前的主题，其中的信息可能已经有所发展或是发生改变。
Spectre.css 框架增加了新的纯 CSS 实现的组件：360 度查看器（ 360-Degree Viewer ），支持桌面和移动端。
演示： https://picturepan2.github.io/spectre/experimentals/viewer-360.html
演示： https://picturepan2.github.io/spectre/experimentals/viewer-360.html
 |
1
Bryan0Z 2018 年 11 月 25 日 via Android
有点厉害
|
 |
2
gzlock 2018 年 11 月 25 日 via Android
有大佬可以讲解一下核心原理吗
|
 |
3
Jackliu 2018 年 11 月 25 日
|
 |
4
rabbbit 2018 年 11 月 25 日
原理就是给滑动条绑了个 input 事件,修改背景坐标
把那个 input 事件删了就动不了了  |
 |
5
fanhaipeng0403 2018 年 11 月 25 日
@rabbbit 能问下你这个 gif 是怎么生成的么 ，有 chrome 插件么？
|
 |
6
Everyman 2018 年 11 月 25 日
@fanhaipeng0403 这种产品图一般是设计师做好导出给开发人员直接使用的吧。
|
|
7
fanhaipeng0403 2018 年 11 月 25 日
@yiranHZT 我的意思 是说，他打开 console 然后各种操作，把这个过程录下来，然后生成 gif，发给别人展示过程的工具是什么。。。
|
 |
8
crab 2018 年 11 月 25 日  1
@fanhaipeng0403 gifcam 或者 licecap
|
 |
9
barryng67 2018 年 11 月 25 日 via iPhone
这个只是换图片吧？以为是 three.js 那种。
|
 |
10
idtaanlcoe 2018 年 11 月 26 日 via Android
真的没有任何 js 吗
|
|
11
gzlock 2018 年 11 月 26 日 via Android
我以为是 CSS 实现监听 input 事件那种“纯 CSS ”
|
 |
12
Mutoo 2018 年 11 月 26 日
显示层本身是纯 CSS 的。用的是「属性选择器(value=15)」与「相邻选择器(+)」结合，将 input 元素放在 image 前面，然后通过 input 的 value 属性 来显示不同的 background-image:
.viewer-360 .viewer-slider[value="15"]+.viewer-image |
|
13
Mutoo 2018 年 11 月 26 日
@Mutoo 而 input 的 value 属性只能作为初始值使用，当你移动这个 slide 的时候，value 并不会跟着变化。所以还是需要 js 来辅助更新这个 value 属性。
|
 |
14
Tory 2018 年 11 月 26 日
标题党,我还以为一点 js 都没有呢
|
 |
15
Outshine 2018 年 11 月 26 日 1
重新定义了“纯 CSS ”
|
 |
16
flyingkid 2018 年 11 月 26 日
这种情况适用极端情况。否则我们用 js 监听 onchange 动态来的更简单和更容易维护。
|
Select Language