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. python第九章：面向对象--小白博客

     面向对象介绍 一.面向对象和面向过程 面向过程:核心过程二字,过程即解决问题的步骤,就是先干什么后干什么 基于该思想写程序就好比在这是一条流水线,是一种机械式的思维方式 优点:复杂的过程流程化 缺点 ...

  2. 对于for循环中使用let或var时，i的作用域范围的记录

    在for循环中使用let时,结果如下 for内部定义的i在循环结束后不会覆盖外部的i 在for循环中使用var,且不控制i的作用域时,结果如下 第一个for循环内部定义的i并不会创建,而是直接使用外部 ...

  3. Educational Codeforces Round 62 (Rated for Div. 2) - C Playlist

    当时题意看错了...不过大致思路是对的,唯一没有想到的就是用优先队列搞这个东西,真是不该啊... 题意大概就是,有N首歌,N首歌有两个东西,一个是长度Ti,一个是美丽值Bi,你最多可以选择K首歌, 这 ...

  4. 科大讯飞语音合成api

    import base64import jsonimport timeimport hashlibimport requests # API请求地址.API KEY.APP ID等参数,提前填好备用a ...

  5. js04-DOM对象一

    一.什么是HTML  DOM HTML  Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM 把 HTML 文档呈现 ...

  6. AI佳作解读系列(二)——目标检测AI算法集杂谈：R-CNN，faster R-CNN，yolo，SSD，yoloV2，yoloV3

    1 引言 深度学习目前已经应用到了各个领域,应用场景大体分为三类:物体识别,目标检测,自然语言处理.本文着重与分析目标检测领域的深度学习方法,对其中的经典模型框架进行深入分析. 目标检测可以理解为是物 ...

  7. Shell命令-文件及目录操作之pwd、rm

    文件及目录操作 - pwd.rm 1.pwd:显示当前所在位置信息 pwd命令的功能说明 pwd命令用于显示当前工作目录的绝对路径,以便在各个目录间来回切换. pwd命令的语法格式 pwd [OPTI ...

  8. Python——Pycharm安装、激活、中文、

    1.激活pycharm (1) 修改hosts文件:将  0.0.0.0 account.jetbrains.com   添加到文件最后面   Windows系统hosts文件路径为:  c:\win ...

  9. #!/usr/bin/python3的作用 解决vscode ImportError: No module named xxxx

    在 Python 脚本的第一行经常见到这样的注释: #!/usr/bin/env python3 或者 #!/usr/bin/python3 含义 在脚本中, 第一行以 #! 开头的代码, 在计算机行 ...

  10. STM32的IO口是如何配置为某个外设使用的 ---？

    @2019-03-01 [猜想] 使用片内外设功能: 首先将对应 IO 口配置为复用输出 其次是 IO 口对应的多个功能外设,哪个外设使能即将外设与 IO 口相连 [疑问] 若多个外设都使能,那么到底 ...