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. 家庭记账本小程序之改（java web基础版五）

    实现修改消费账单 1.main_left.jsp中该部分,调用Servlet中的list方法 2.Servlet中的list方法,调用Dao层的list方法,跳转到list.jsp页面 3.Dao层的 ...

  2. vue2.0里的路由钩子

    路由钩子 在某些情况下,当路由跳转前或跳转后.进入.离开某一个路由前.后,需要做某些操作,就可以使用路由钩子来监听路由的变化 全局路由钩子: router.beforeEach((to, from, ...

  3. CodeForces 280B Maximum Xor Se

    题目链接:http://codeforces.com/contest/280/problem/B 题目大意: 给定一个由n个数组成的一个序列,s[l..r] (1 ≤ l < r ≤ n)代表原 ...

  4. yum 安装fuser命令

    yum install -y psmisc 转自:https://www.cnblogs.com/saneri/p/5465718.html 有时候我们需要umount某个挂载目录时会遇到如下问题: ...

  5. SpringCloud学习笔记：服务注册与发现Eureka（2）

    1. Eureka简介 Eureka是一个用于服务注册和发现的组件,分为Eureka Server和Eureka Client,Eureka Server为Eureka服务注册中心,Eureka Cl ...

  6. kafka相关问题集锦

    参考地址:https://blog.csdn.net/gao23191879/article/details/80815078?utm_source=blogxgwz5 你在写java 版的 kafk ...

  7. codeforces721C

    Journey CodeForces - 721C Recently Irina arrived to one of the most famous cities of Berland — the B ...

  8. B. Vova and Trophies 字符串预处理+思维+贪心

    题意:给出一个字符串 只有G和S  可以交换任意两个位置的字符一次 问 最长的G的长度是多少 思路:预处理字符串 把相同的G粘成一个G 记一下数量  字符串变为 GSSGSGGSGSSG 相邻有一个S ...

  9. Swagger如何测试Date类型参数

    问题 Swagger测试时,参数直接输入日期格式化后的类型,会报参数日期转换错误 :ConversionFailedException 解决 网上说在参数上添加注解 @DateTimeFormat(p ...

  10. 1: jsp的4个作用域 pageScope、requestScope、sessionScope、applicationScope的区别

    1.区别: 1.page指当前页面有效.在一个jsp页面里有效 2.request 指在一次请求的全过程中有效,即从http请求到服务器处理结束,返回响应的整个过程,存放在HttpServletReq ...