使用 ThreeSixty 创建可拖动的 360 度全景图片预览效果

Posted im-victor

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 ThreeSixty 创建可拖动的 360 度全景图片预览效果相关的知识,希望对你有一定的参考价值。

ThreeSixty 是生成可拖动的360度预览图像序列的 jQuery 插件。只需要在你的 html 页面包引入最新的 jQuery 和 threesixty.js 文件就可以使用了,支持键盘上的箭头键,也支持触摸和移动设备。可以使用 nextFrame() 和 prevFrame() 绑定 UI 控件。

 

技术图片

 

官方网站     在线演示     插件下载

 

  示例 HTML:

1
<div class="threesixty" data-path="assets/img/src/gem{index}.JPG" data-count="61"></div>

  示例 javascript

1
2
3
4
5
$(document).ready(function(){
    $(‘.threesixty‘).threeSixty({
        dragDirection: ‘horizontal‘
    });
});

以上是关于使用 ThreeSixty 创建可拖动的 360 度全景图片预览效果的主要内容,如果未能解决你的问题,请参考以下文章

创建可拖动的引脚注释,但应阻止其拖动按钮

Angular 5:如何使用 jsPlumb 使动态创建的组件可拖动?

如何使用 PDF.js 和 jQuery 在 PDF 上创建可拖动元素

动态创建jquery-ui可拖动句柄

可拖动的 jQuery UI 不适用于新创建的 DOM 元素

用于创建可拖动元素的 React 库