使用 ThreeSixty 创建可拖动的 360 度全景图片预览效果
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 度全景图片预览效果的更多相关文章
- 使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果
360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程中将使用javascript来打造一个超酷的全景幻灯实 ...
- 基于Three.js的360X180度全景图预览插件
基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10 HTML5中国 原文 http://www.html5cn.org/article-8621-1 ...
- 基于jQuery页面窗口拖动预览效果
今天给大家分享一款基于Query页面窗口拖动预览效果.这是一款基于jQuery+HTML5实现的模拟页面窗口显示拖动窗口预览特效.这款实例适用浏览器:IE8.360.FireFox.Chrome.Sa ...
- create-react-app创建项目并用git上传至GitHub及展示预览效果
1.在本地中创建一个项目所在的文件夹 2.npm -g create-react-app 3.在此文件夹下 create-react-app react-demo (项目名) 4.cd react-d ...
- threesixty.min.js 和jquery.threesixty.js使用总结----实现360度展示
最近公司做一个项目需要360度展示汽车的外观,就用到了threesixty.min.js,自己总结一下使用方法: treesixty.min.js 源码: /*! threesixty-slider ...
- [js/jquery]移动端手势拖动,放大,缩小预览图片
摘要 有这样的需求需要在手机端预览图片的时候,实现图片的手势拖动,放大缩小功能.最终通过touch.js这个插件实现了效果. touch.js Touch.js是移动设备上的手势识别与事件库, 由百度 ...
- 做一个360度看车的效果玩玩(web)
前几天在 Lexus 官网看到有这样的一个效果:http://www.lexus.com.cn/models/es/360 于是顺手打开控制台看了下他们是怎么做的,发现使用的技术还是比较简单的,通过背 ...
- JavaScript实现360度全景图片展示效果
全景拍摄:所谓“全景拍摄”就是将所有拍摄的多张图片拼成一张全景图片.它的基本拍摄原理是搜索两张图片的边缘部分,并将成像效果最为接近的区域加以重合,以完成图片的自动拼接.现在的智能手机也基本带这个功能. ...
- 移动端上传照片 预览+Draw on Canvas's Demo(解决 iOS 等设备照片旋转 90 度的 bug)
背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...
随机推荐
- xadmin后台页面的自定制(2)重写钩子函数版
由于项目有通过自定义页面来实现功能的需求,百度也查了很多资料,也没找到合适的方法,所以决定分析源码,通过对源码的分析,找到了此方法. 01-需求 首先,如果要在xadmin中展示一个数据管理页面,首先 ...
- Django缓存机制--rest_framework中节流源码使用的就是django提供的缓存api
一.配置缓存 https://www.jb51.net/article/124434.htm 二.缓存全站.页面.局部 三.自我控制的简单缓存API API 接口为:django.core.c ...
- 7 Servlet 会话技术
1 什么是会话 用户开一个浏览器访问某个网站,点击多个链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为会话,与打电话类似.会话过程要解决一些问题, 每个用户在使用浏览器与服务器进行会话时 ...
- 《Effective C++》定制new和delete:条款49-条款52
条款49:了解new-handler的行为 当operator new无法分配出内存会抛出异常std::bad_alloc 抛出异常前会反复调用用户自定义的new-handler函数直至成功分配内存 ...
- SpringMVC学习手册(一)------工作原理解析
1.什么是MVC模式 图解: 2.SpringMVC原理图解: springMVC中的几个组件: 前端控制器(DispatcherServlet):接收请求,响应结果,相当于电脑的CP ...
- 前置通知也能对参数进行加工 通过joiPoint这个方法
- 用pip下载的python模块怎么在PyCharm中引入报错
在IDE中导入下载的模块,比如:numpy模块 你会发现虽然你安装了numpy模块,在CMD中python可以import numpy,但是你在PyCharm引不进去,为什么呢?你要是有注意的话,安装 ...
- MT【321】分类线性规划
若二次函数$f(x)=ax^2+bx+c(a,b,c>0)$有零点,则$\min\{\dfrac{b+c}{a},\dfrac{c+a}{b},\dfrac{a+b}{c}\}$ 的最大值为__ ...
- [HackerRank]New Year Chaos[UNDONE]
Input (stdin)Download 2 8 5 1 2 3 7 8 6 4 8 1 2 5 3 7 8 6 4 Your Output (stdout) Too chaotic Too cha ...
- win+R启动列表
屌丝才用windows,无奈~ """ Win+R 快速启动的命令: 系统应用程序: calc - 启动计算器 charmap - 启动字符映射表 chkdsk - Ch ...