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 度全景图片预览效果的更多相关文章

  1. 使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果

    360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程中将使用javascript来打造一个超酷的全景幻灯实 ...

  2. 基于Three.js的360X180度全景图预览插件

    基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10  HTML5中国 原文  http://www.html5cn.org/article-8621-1 ...

  3. 基于jQuery页面窗口拖动预览效果

    今天给大家分享一款基于Query页面窗口拖动预览效果.这是一款基于jQuery+HTML5实现的模拟页面窗口显示拖动窗口预览特效.这款实例适用浏览器:IE8.360.FireFox.Chrome.Sa ...

  4. create-react-app创建项目并用git上传至GitHub及展示预览效果

    1.在本地中创建一个项目所在的文件夹 2.npm -g create-react-app 3.在此文件夹下 create-react-app react-demo (项目名) 4.cd react-d ...

  5. threesixty.min.js 和jquery.threesixty.js使用总结----实现360度展示

    最近公司做一个项目需要360度展示汽车的外观,就用到了threesixty.min.js,自己总结一下使用方法: treesixty.min.js 源码: /*! threesixty-slider ...

  6. [js/jquery]移动端手势拖动，放大，缩小预览图片

    摘要 有这样的需求需要在手机端预览图片的时候,实现图片的手势拖动,放大缩小功能.最终通过touch.js这个插件实现了效果. touch.js Touch.js是移动设备上的手势识别与事件库, 由百度 ...

  7. 做一个360度看车的效果玩玩（web）

    前几天在 Lexus 官网看到有这样的一个效果:http://www.lexus.com.cn/models/es/360 于是顺手打开控制台看了下他们是怎么做的,发现使用的技术还是比较简单的,通过背 ...

  8. JavaScript实现360度全景图片展示效果

    全景拍摄:所谓“全景拍摄”就是将所有拍摄的多张图片拼成一张全景图片.它的基本拍摄原理是搜索两张图片的边缘部分,并将成像效果最为接近的区域加以重合,以完成图片的自动拼接.现在的智能手机也基本带这个功能. ...

  9. 移动端上传照片 预览+Draw on Canvas's Demo（解决 iOS 等设备照片旋转 90 度的 bug）

    背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...

随机推荐

  1. HDU-1695 莫比乌斯反演

    这里学习一下莫比乌斯反演 翻看了很多书,发现莫比乌斯反演,准确来说不是一种固有的公式,而是一种法则. 我们定义F(n),为f(d)的和函数,而定义f(n)为某儿算术函数. 反演公式1:反演n的因子时 ...

  2. Binary Search(Java)(递归)

    public static int rank(int[] array, int k, int front, int rear) { if(front > rear) return -1; int ...

  3. Maven将远程包拉去到项目指定路径

    <build> <plugins> <plugin> <artifactId>maven-dependency-plugin</artifactI ...

  4. springmvc解决中文乱码问题

    1 第一种情况(get接收参数): 最近在用solr做一个搜索服务,发布给手机和pc等客户端调用,调用方式为:   http://www.ganbo.search/search?q="手机& ...

  5. cglib 代理实现

    cglib代理的原理是通过继承实现对目标对象的代理 //1.接口 package cn.itcast.service; public interface UserService { void save ...

  6. jcp 打印机字体变淡变模糊bootstrap

    问题: 如果应用了bootstrap.css, 当使用网页打印时,文字的颜色都会丢失,div中的背景色也会丢失.字体失真 解决: 找到bootstrap 的css文件,在星号后面加括号那些东西即可 @ ...

  7. wiki

    GRANT ALL PRIVILEGES ON confluence.* TO 'confluence'@'localhost' IDENTIFIED BY '%SaRK%TDpU#CyT6i';

  8. java 11 局部变量类型推断

    什么是局部变量类型推断? var javastack = "javastack"; System.out.println(javastack); 大家看出来了,局部变量类型推断就是 ...

  9. ubuntu16.04+cuda9+cudnn7+tensorflow+pycharm环境搭建

    安装环境:ubuntu16.04+cuda9+cudnn7+tensorflow+pycharm 1)前期搭建过程主要是按照这篇博文,对于版本选择,安装步骤都讲得很详细,亲测有效! https://b ...

  10. [BJOI2019]勘破神机（斯特林数+二项式定理+数学）

    题意:f[i],g[i]分别表示用1*2的骨牌铺2*n和3*n网格的方案数,求ΣC(f(i),k)和ΣC(g(i),k),对998244353取模,其中l<=i<=r,1<=l< ...