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. Winform 最小化双击显示，最小化右键退出。退出

    WinForm 之 窗口最小化到托盘及右键图标显示菜单 Form最小化是指整个Form都缩小到任务栏上,但是窗体以Form的标题栏形式显示在任务栏上, 若是想让Form以Icon的形式显示在任务栏右下 ...

  2. 一个.net的程序员如何转到java的?

    先说明,大佬请忽略我这篇文章, 我是一个做了5年的纯种C#开发人,  我在此仅记录一下我转java的过程.都知道, java是开源的,所以它的开发工具贼多,不像.net, 直接地表最强的IDE. 像现 ...

  3. mysql varchar integer

    MySQL 中将 varchar 字段转换成数字进行排序 - MySQL - 大象笔记 https://www.sunzhongwei.com/order-by-varchar-field-which ...

  4. MySQL CONCAT opposite

    csv - What is the opposite of GROUP_CONCAT in MySQL? - Stack Overflowhttps://stackoverflow.com/quest ...

  5. SVD分解　解齐次线性方程组

    SVD分解 只有非方阵才能进行奇异值分解 SVD分解:把矩阵分解为 特征向量矩阵+缩放矩阵+旋转矩阵 定义 设\(A∈R^{m×n}\),且$ rank(A) = r (r > 0) $,则矩阵 ...

  6. Bean之间的关系

    Bean之间主要有继承和依赖的关系,这里的继承并不是我们面向对象里面所提到的继承. 继承 我们先来创建一个新的配置文件beans-relation.xml <bean id="addr ...

  7. AirBnB春招笔试题

    试题说明 笔试题只有一道,限时1小时. 模拟一个战争外交游戏,游戏中定义了三种操作: A city1 Hold : 军队A 占领了city1 A city1 Move city2 : 军队A从city ...

  8. react学习目录

    前面的话 React是如今热门的两大前端框架之一,它设计思路独特,性能卓越,逻辑简单,受到了大量开发者的喜爱.Vue的基本思路是基于HTML模板的扩展,而React的基本思路是基于JS语言的扩展.由于 ...

  9. [模板] 区间mex && 区间元素种数

    区间mex 问题 给定序列\({a_i}\), 每次询问给出\(l\), \(r\), 询问 \(\text{mex} \{a_i\}, i \in \{l, l+1, \cdots r\}\) 解法 ...

  10. IO多路复用和local概念

    一.local 在多个线程之间使用threading.local对象,可以实现多个线程之间的数据隔离 import time import random from threading import T ...