H5实现可拖动的360度环拍物品展示(1)

需要实现可拖动的360度环拍的物品展示效果,大概效果为,拖动可360度查看。

H5实现可拖动的360度环拍物品展示(1)_第1张图片

 使用threesixty.js插件实现。

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

使用方法

引用jquery以及jquery.threesixty.js

图片存放位置

H5实现可拖动的360度环拍物品展示(1)_第2张图片

html

JavaScript

$(document).ready(function(){
     var $threeSixty = $('.threesixty');

     $threeSixty.threeSixty({
         dragDirection: 'horizontal',//拖拽的方向
         useKeys: true,//是否可以使用键盘上的左右按键进行操作
         draggable: true//是否可以鼠标拖拽
     });
});

插件 下载地址

另外一种实现类似效果的方法 H5实现可拖动的360度环拍物品展示(2)

你可能感兴趣的:(JavaScript)