360全景html插件,jquery实现360度全景展示特效插件
jquery.pano.js是一款可以实现360度全景展示特效的jquery插件。该360度全景展示特效支持使用鼠标拖拽移动图片,也可以通过左右导航按钮来移动图片。它兼容ie8浏览器,支持移动触摸设备,非常实用。
使用方法
在页面中引入jquery和jquery.pano.js文件。
HTML结构
该360度全景展示特效的HTML结构如下:
«
»
初始化插件
在页面DOM元素加载完毕,可以通过pano()方法来初始化该360度全景展示特效插件。
$("#myPano").pano({
img: "./sphere.jpg"
});
配置参数
该360度全景展示特效插件有3个配置参数:
img:背景图片的url。必须是一张360度全景图。
interval:在调用moveLeft或moveRight方法时,用户按下鼠标左键或触摸屏幕时,触发移动事件的时间间隔。默认为100ms。
speed:动画移动的速度。默认为50ms。
方法
该360度全景展示特效插件有3个公开的方法:
oveLeft(interval, speed):根据指定的interval和speed向左移动图片。如果没有指定参数,使用默认值。
moveRight(interval, speed):根据指定的interval和speed向右移动图片。如果没有指定参数,使用默认值。
stopMoving():停止移动图片。
例如:
$(document).ready(function(){
var pano = $("#myPano").pano({
img: "/path/to/image.jpg",
interval: 100,
speed: 50
});
pano.moveLeft();
pano.stopMoving();
pano.moveRight();
pano.stopMoving();
});
jquery.pano.js 360度全景展示特效jquery插件的github地址为:https://github.com/seancoyne/pano
360全景html插件,jquery实现360度全景展示特效插件相关推荐
- php把数字倒着展示,jQuery+PHP实现动态数字展示特效
HTML 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: 代码如下: 当前在线: jQuery 首先我 ...
- html5 酒店入住插件,jQuery酒店类入住日期时间范围选择器插件
t-datepicker是一款jQuery酒店类入住日期时间范围选择器插件.该jquery日期选择器提供多个配置参数和方法,可以创建响应式的.灵活的.多种主题效果的日期范围选择器.它的特点还有: 内置 ...
- html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
- html全屏轮播图插件,jQuery全屏3D轮播图插件
jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件.该jquery轮播图插件采用响应式设计,可以在垂直方向上制作出类似立方体滚动的3d轮播图效果. 使用方法 在页面中引入jqu ...
- html5 云朵飘动效果,jQuery超有趣的白云飘动特效插件
jQlouds是一款非常有趣的可以制作天空中白云飘动特效的jQuery插件.天空中白云朵朵,你可以通过这个插件来设置云朵的大小.位置.模糊以及被风吹动的效果. 安装 可以使用bower安装这个白云飘动 ...
- html5div拖拽插件,jquery+html5多文件拖放上传插件jquery.filer
jquery.filer是一个简单的HTML5文件上传插件工具,彻底改变jQuery文件输入并使其支持同时选择多个文件,支持拖放,上传验证文件.大小.后缀名,显示缩略图,自定义上传类型图标,即时上传, ...
- html在线打印插件,jQuery简单易用的网页内容打印插件
Element 1 他们的故事始于雨天,却也终于雨天,没能给他们一个晴朗的结局.他们的故事里总有一种挥之不去的湿意,不知是雨水,还是泪水.下雨了,路上的行人纷纷撑起伞,从高处往下看,是一片五彩缤纷的伞 ...
- html5 点击图片预览放大,jQuery超实用图片放大预览特效插件
大自然的自述 过去,我这儿有新鲜的空气,清澈的河流,雄伟的高山,一望无际的草原,郁郁葱葱的森林.天空中,小鸟在自由自在的飞翔:水里,小鱼在快活的游来游去:森林里,动物们快乐地嬉戏,人类辛勤的种植.一切 ...
- JQuery模板插件jquery.tmpl-动态ajax扩展
在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以 ...
最新文章
- 腾讯云工业互联网助力平台发布 推动制造业“数字化”蝶变
- 技术人员如何创业《一》—— 产品及想法(转载)
- 【云上ELK系列】Logstash迁移Elasticsearch数据方法解读
- HDU - 6959 zoto 莫队 + 值域分块
- android 7.1 apk的systemuid和系统应用Setting相同导致开机找不到库的问题
- Ugly Numbers UVA - 136
- C# Activator.CreateInstance
- 翟佳:高可用、强一致、低延迟——BookKeeper的存储实现
- 基于C#实现的在线聊天室的桌面系统软件
- c语言模拟银行ATM的程序,简单模拟银行ATM取款系统 | C/C++程序员之家
- 互联网公司招聘--阿里巴巴--游戏运营--2015年笔试题
- Selenium+Python3之:多线程进行跨浏览器测试
- 【纯音的世界】系列---【静音吧】爱.请给我时间.
- 还原android系统文件夹,如何从Android的内存中恢复文件-万兴恢复专家
- Kubernetes 系列之 kubeadm 搭建k8s集群
- ps4实况2016服务器维护,PES2016 全平台常见问题一览(FAQ)
- C\C++ 输出8位,不足时全补0
- 数字化转型--银行核心系统|应用架构与案例
- Linux云计算学习笔记-1
- java项目PC端调用条码打印机打印条码/吊牌(JS实现)