发布时间：2019-06-16 22:18:17
JS Cloudimage 360 View 是一种简单的交互式资源,可用于提供产品的虚拟浏览。
使用方法
第 1 步:安装
在正文标记中的body内容之后,将带有 CDN 链接的脚本标记添加到 js-cloudimage-360-view lib
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.0.7/js-cloudimage-360-view.min.js"></script>
您还可以使用主要版本号而不是固定版本来提供最新版本。
<script src=""https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2/js-cloudimage-360-view.min.js""></script>
第 2 步:初始化
添加js-cloudimage-360-view lib后，只需使用类名“cloudimage-360”，服务器文件夹路径，文件名和图像数量初始化它：
<div
class="cloudimage-360"
data-folder="https://scaleflex.cloudimg.io/crop/1920x700/n/https://scaleflex.airstore.io/demo/360-car/"
data-filename="iris-{index}.jpeg"
data-amount="36"
></div>配置
class
类型: String | 值: "cloudimage-360" | 必填
js-cloudimage-360 视图库的选择器。
data-folder (or folder)
类型: String(url) | required
服务器上的图像文件夹。
data-filename (or filename)
类型: String | Default: image-{index}.jpg | optional
360图像的文件名模式。必须包含{index}，库将替换为1和数据量之间的数字
data-amount (or amount)
类型: Number | Default: 36 | optional
要为360度视图加载的图像数量。
data-keys (or keys)
类型: Bool | Default: false | optional
通过按键盘上的箭头键支持360度旋转。
data-autoplay (or autoplay)
类型: Bool | Default: false | optional
加载时自动播放360旋转视图。
data-full-screen (or full-screen)
类型: Bool | Default: false | optional
以全屏模式打开360旋转视图。
data-magnifier (or magnifier)
类型: Number | Default: none | optional
放大镜缩放图像。
data-ratio (or ratio)
类型: Number (height / width) | Default: none | optional
防止页面跳跃。
data-autoplay-reverse (or autoplay-reverse)
类型: Bool | Default: false | optional
加载时自动播放360旋转视图。
data-speed (or speed)
类型: Number | Default: 150 | optional
更改自动播放帧的速度（以毫秒为单位）。
data-drag-speed (or drag-speed)
类型: Number | Default: 150 | optional
在拖动事件上更改帧的速度因子。
data-spin-reverse (or spin-reverse)
类型: Bool | Default: false | optional
旋转方向，默认情况下它使用逆时针方向（图像索引从1到数据量）。
data-box-shadow (or box-shadow)
类型: String (e.g. data-box-shadow="inset 0 0 100px #222") | Default: none | optional
为容器应用框阴影。
data-bottom-circle (or bottom-circle)
类型: Bool | Default: false | optional
在容器底部显示360视图行。
data-bottom-circle-offset (or bottom-circle-offset)
类型: Number | Default: 5 | optional
360视图线的底部偏移。
data-lazyload (or lazyload)
类型: Bool | Default: false | optional
将仅加载靠近客户端视口的360度视图图像，从而加快页面加载时间。如果设置为true，则必须包含其他脚本，请参阅延迟加载
data-lazyload-selector (or lazyload-selector)
类型: String | Default: lazyload | optional
Helper类根据您选择的库应用延迟加载，请参阅延迟加载
延迟加载
默认情况下，延迟加载不包含在js-cloudimage-360-view中。 有很好的库可以实现这一目标。 如果在配置中启用延迟加载，则需要添加一个额外的库，如lazysizes，yall.js（Yet Another Lazy Loader），lozad.js来处理它。
要保存API调用，您需要使用我们的cdn包中的一个：
CDN链接到js-cloudimage-360-view 1.1.0 + lazysizes 4.1.7
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lazysizes.min.js"></script>
CDN链接到js-cloudimage-360-view 1.1.0 + yall.js 3.1.1
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.yall.min.js"></script>
CDN链接到js-cloudimage-360-view 1.1.0 + lozad.js 1.9.0
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lozad.min.js"></script>
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
