简介
threesixtyjs 是一种基于 HTML5 和 JavaScript 的 360 度旋转插件，可以实现插入 360 度旋转的图片，并在浏览器中轻松地旋转、缩放和拖动图片。其它一些特点包括可自定义样式、响应式布局等。
本篇文章主要介绍 threesixtyjs 的安装方法、使用方法、配置参数等。
安装
使用 npm 安装 threesixtyjs，通过 Node.js 安装:
npm install threesixtyjs
或者下载源代码并手动导入：
<script type="text/javascript" src="threesixty.js"></script>
使用
使用 threesixtyjs 可以在 HTML 中轻松插入可鼠标拖拽操作的图片，以下是一个基本的示例：
-- -------------------- ---- -------
--------- -----
------
------
-------------------------------
------- ---------------------- -----------------------------
-------
--------------------- -
------ ------
------- ------
-
--------
-------
------
---- ------------------------- ---------------------------- -----------------------------------------------------
--------
----- ---------- - --- ------------------------------------------------------------
---------
-------
-------在我们的标记中，我们有一个空 div，id 为 threesixty-container，并采用了一个 data-images 属性来指定 360 图片的路径。 然后在脚本中实例化 ThreeSixty，调用构造函数将目标 div 作为参数。
配置参数
threesixtyjs 提供了一些选项，以及通过自定义事件监听器来满足个性化的需求。下面是常见的选项和事件的示例：
选项
以下是配置 threesixty 的基本选项：
- draggable: 激活或禁用拖拽操作，默认值为
true - dragSpeed: 设置拖拽速度，值越大速度越快，默认值为
0.5 - responsive: 启用或禁用响应式布局，默认值为
true - executeLoop: 启用或禁用循环播放，默认值为
false - loopTimeout: 在循环播放中的每个新图像之间暂停的毫秒数，默认值为
100 - disableZoom: 禁用或启用缩放，默认值为
false - autoCrop: 将图像自动适应容器，比例会发生变化，默认值为
false
自定义事件
threesixtyjs 提供许多自定义事件，您可以使用这些事件来满足个性化的需求：
- onStart: 当鼠标按下时触发
- onDrag: 当图片拖动时触发
- onDragEnd: 当鼠标松开时触发
- onMove: 当图片移动时触发
- onLoadComplete: 当所有图片加载完毕时触发
如果您要使用自定义事件，请使用事件监听器：
-- -------------------- ---- -------
--------
----- ---------- - --- ----------------------------------------------------------- -
---------- -----
---------- ----
----------- -----
------------ ------
------------ ----
------------ ------
--------- -----
---
------------------------------------- -------- ------- -
--------------------- ------- -------
---
---------总结
threesixtyjs 是一个非常方便且易于使用的轻量级 360 度旋转插件，可以让您随时满足您的网页设计需求。在本篇文章中，我们已经详细介绍了 threesixtyjs 的使用方法、配置选项以及事件监听器，希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d0927023822642