jQuery Panorama Viewer 这款插件可以帮助你在网站中嵌入全景图片。要做到这一点，首先只需要在页面中引入最新的 jQuery 库，以及 jquery.panorama_viewer.js 和 panorama_viewer.css 到页面中，然后给图片添加 CSS 类“panorama”。现代浏览器如 Chrome ，Firefox 和 Safari 以及在智能手机上都测试通过。

您可能感兴趣的相关文章

使用示例：

  $(".panorama").panorama_viewer({

    repeat: false,

    direction: "horizontal",

    animationTime: 700,

    easing: "ease-out",

    overlay: true

  });

　　

立即下载      效果演示

本文链接：Panorama Viewer – jQuery 360度全景展示插件

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

jQuery Panorama Viewer – 360度全景展示插件的更多相关文章

  1. 360度3D 旋转插件

    Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比 ...

  2. krpano HTML5 Viewer可以实现全景展示

    http://www.krpano360.com/ krpanp 陀螺仪调取 全景展示

  3. 基于Three.js的360度全景--photo-sphere-viewer--简介

    这个是基于three.js的全景插件  photo-sphere-viewer.js  ---------------------------------------- 1.能添加热点: 2.能调用陀 ...

  4. [置顶] 实现360度全景图像的利器--PanoramaGL

    传送门 ☞轮子的专栏 ☞转载请注明 ☞ http://blog.csdn.net/leverage_1229 介绍 本指南将介绍一个PanoramaGL 0.1类库的简单用法,更多的细节请签出 Hel ...

  5. JavaScript实现360度全景图片展示效果

    全景拍摄:所谓“全景拍摄”就是将所有拍摄的多张图片拼成一张全景图片.它的基本拍摄原理是搜索两张图片的边缘部分,并将成像效果最为接近的区域加以重合,以完成图片的自动拼接.现在的智能手机也基本带这个功能. ...

  6. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  7. 【Android开发VR实战】二.播放360°全景视频

    转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53924006 本文出自[DylanAndroid的博客] [Android开发 ...

  8. threesixty.min.js 和jquery.threesixty.js使用总结----实现360度展示

    最近公司做一个项目需要360度展示汽车的外观,就用到了threesixty.min.js,自己总结一下使用方法: treesixty.min.js 源码: /*! threesixty-slider ...

  9. jQuery手风琴广告展示插件

    效果说明:当鼠标移动到已折叠广告的标题后,折叠当前已展开的广告,并同步展开相应的折叠广告.这种Accordion效果,看似简单,但因为存在动画同步的问题,不能简单地用两个animate()来实现.必须 ...

随机推荐

  1. CSS布局中的问题

    1. 高度自适应的问题 1. 一个元素是否可以使用百分比显示,取决于它的父级元素,所以如果需要给此元素设置100%,那么需要先给父元素设置高100%. 2. 一级元素的父元素是body,所以如果我们想 ...

  2. 文本溢出text-overflow和文本阴影text-shadow

    前面的话 CSS3新增了一些关于文本的样式,其中text-overflow文本溢出和text-shadow文本阴影有些特别.因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性. ...

  3. 可视化工具solo show-----Prefuse自带例子GraphView讲解

    2014.10.15日以来的一个月,挤破了头.跑断了腿.伤透了心.吃够了全国最大餐饮连锁店——沙县小吃.其中酸甜苦辣,绝不是三言两语能够说得清道的明的.校招的兄弟姐妹们,你们懂得…… 体会最深的一句话 ...

  4. 碉堡了！ 纯 CSS 绘制《辛普森一家》人物头像

    这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...

  5. ionic+nodejs开发遇到的跨域和post请求数据问题

    最近学习ionic+nodejs开发混合app中遇到了一些问题,在此总结一下. 开发环境搭建 项目地址 https://github.com/ytudt/nodejsApp 代码和问题都会在之后的学习 ...

  6. 参与github上开源项目的大致流程和注意事项

    Foreword github是一个很火的代码托管服务网站,可能好多人都想参与一两个项目玩一玩学习一下,但由于是纯英文的网站,可能又会止步于想法上没有动手实践.接下来我就介绍一下参与github上开源 ...

  7. 50款免费 PSD 名片设计模板源文件下载《下篇》

    名片是陌生人之间建立联系的最便捷.最有效的工具.名片它可能是给你的客户留下正面的印象第一步,另一方面,名片是一个企业最重要和最符合成本效益的营销工具之一,尤其是对于刚刚起步的企业.这里收集了50款免费 ...

  8. Javascript动画效果（四）

    Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...

  9. 开源服务专题之-------rsync数据备份

    RSYNC是Remote Sync 远程同步的简称,与SCP的比较,SCP= 无法备份大量数据,类似windows的复制,而rsync=边复制 ,边统计,边比较,可以备份大量数据.可以镜像保存整个目录 ...

  10. React-Native 给客户端来个「同音词模糊搜索」

    APP上线一段时间有用户反应说不方便找东西,其实APP的数据不大也就三四百条而以,但受限于手机端展示区域太小.信息大爆炸,大家也基本上不会去记具体的名称都是根据模糊的印象进行搜索而且现在大家基本都用拼 ...