360度全景插件JS Cloudimage 360

发布时间：2019-06-16 22:18:17

JS Cloudimage 360 View 是一种简单的交互式资源,可用于提供产品的虚拟浏览。

使用方法

第 1 步:安装

在正文标记中的body内容之后,将带有 CDN 链接的脚本标记添加到 js-cloudimage-360-view lib

您还可以使用主要版本号而不是固定版本来提供最新版本。

第 2 步:初始化

添加js-cloudimage-360-view lib后，只需使用类名“cloudimage-360”，服务器文件夹路径，文件名和图像数量初始化它：

配置

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

CDN链接到js-cloudimage-360-view 1.1.0 + yall.js 3.1.1

CDN链接到js-cloudimage-360-view 1.1.0 + lozad.js 1.9.0

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com