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. Linux使用百度云

    导读 百度云没有Linux客户端,于是有大神用Go语言写出来一个叫BaiduPCS-Go的命令行盘客户端,可以通过终端操作百度云盘,在Linux上实现上传下载.但是因为是命令行版本的,对没有命令行使用 ...

  2. 机器学习---文本特征提取之词袋模型(Machine Learning Text Feature Extraction Bag of Words)

    假设有一段文本:"I have a cat, his name is Huzihu. Huzihu is really cute and friendly. We are good frie ...

  3. 倍增\ tarjan求lca

    对于每个节点v,记录anc[v][k],表示从它向上走2k步后到达的节点(如果越过了根节点,那么anc[v][k]就是根节点). dfs函数对树进行的dfs,先求出anc[v][0],再利用anc[v ...

  4. Time travel HDU - 4418(高斯消元)

    Agent K is one of the greatest agents in a secret organization called Men in Black. Once he needs to ...

  5. Django自定义分页

    分页 自定义分页 稳扎稳打版 def book(request): # 从URL取参数(访问的页码) page_num = request.GET.get("page") try: ...

  6. Linux-GitLab安装及汉化

    gitlab 安装及汉化 GitLab简介: GitLab是一个用于仓库管理系统的开源项目.使用Git作为代码管理工具,并在此基础上搭建起来的Web服务.可通过Web界面进行访问公开的或者私人项目.它 ...

  7. Apache Flink:特性、概念、组件栈、架构及原理分析

     2016-04-30 22:24:39    Yanjun Apache Flink是一个面向分布式数据流处理和批量数据处理的开源计算平台,它能够基于同一个Flink运行时(Flink Runtim ...

  8. 整体二分(SP3946 K-th Number ZOJ 2112 Dynamic Rankings)

    SP3946 K-th Number (/2和>>1不一样!!) #include <algorithm> #include <bitset> #include & ...

  9. Numpy系列(十三)- 文件IO

    NumPy提供了多种存取数组内容的文件操作函数.保存数组数据的文件可以是二进制格式或者文本格式.二进制格式的文件又分为NumPy专用的格式化二进制类型和无格式类型. 一,tofile()和fromfi ...

  10. 结合别人的文章,做RocketMQ的一点原理分析,结合源码(尽量)----未完待续

    Broker 与Namesrv的关系 1.从namesrv获取配置信息 /** * BrokerConfig类 * * broker每隔30秒(此时间无法更改)向所有nameserver发送心跳,心跳 ...