使用 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在Django 1.11中的使用及中英文切换
版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com xadmin是一个强大的替代django admin的管理后台,github地址为:https://g ...
- Java的selenium代码随笔(2)
import java.awt.AWTException;import java.awt.Robot;import java.awt.Toolkit;import java.awt.datatrans ...
- mysql监控每一条执行的sql语句
查看日志配置是否打开 SHOW VARIABLES LIKE "general_log%"; SET GLOBAL general_log = 'ON'; 打开日志 SET G ...
- Crypto加密解密
crypto 模块提供了加密功能,包含对 OpenSSL 的哈希.HMAC.加密.解密.签名.以及验证功能的一整套封装.我们这里讲crypto AES算法加密 一.使用步骤 1.引入Crypto 1. ...
- JSON数组形式字符串转换为List<Map<String,String>>的8种方法
package com.zkn.newlearn.json; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArr ...
- python json数据的转换
1 Python数据转json字符串 import json json_str = json.dumps(py_data) 参数解析: json_str = json.dumps(py_data,s ...
- 网络基础之HTTP、TCP/IP、Socket
一.HTTP相关 https://www.cnblogs.com/sunny-sl/p/6529830.html https://www.cnblogs.com/ranyonsue/p/5984001 ...
- vue常用手册
1.搭建vue的开发环境: 1.必须要安装node.js 2.安装vue的脚手架工具 官方命令行工具 npm install --global vue-cli 3.新建项目 vue init webp ...
- php运行出现Call to undefined function curl_init()解决方法
php运行出现Call to undefined function curl_init() 64位win7/8 下PHP不支持CURL 除了将PHP.ini中的;extension=php_curl. ...
- 金融量化分析【day111】:Matplotib简介
一.Matplotib-绘图和可视化简介 Matplotib是一个强大的Python绘图和数据可视化的工具包 1.安装方法 pip install matplotlib 2.引用方法 import m ...