使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果

360度的全景图片效果常常可以用到给客户做产品展示，今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程，这里教程中将使用javascript来打造一个超酷的全景幻灯实现，相信大家一定会喜欢的！

在这个教程中没有使用到任何插件，我们将使用HTML，css和javascript来实现，当然，也使用是jQuery这个框架！

如何实现？

我们将使用预先按照360生成的图片进行轮播来实现动画展示效果。包含了180个图片。所以加载时间可能比较长。

代码实现

我们将在css代码中添加media queries，来使得这个效果可以同时在ipad和iphone上实现。

1. 代码文件

我们添加js，css，图片目录。css目录中包含了reset.css。js中包含了jQuery。代码文件如下：

2.  新的项目

创建一个HTML文件index.html。在<head>中我们设置了移动设备的viewport，使得内容不支持缩放。添加俩个文件

reset.css和threesixty.css。包含了自定义的css样式。

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="utf-8">
  5. <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
  6. <title>360</title>
  7. <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
  8. <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
  9. </head>
  10. <body>
  11. </body>
  12. </html>

3. 加载进度条

创建一个<div>来容纳幻灯。其中包含一个<ol>，用来包含图片序列<li>，同时也包含了一个<span>来显示进度条。我们将使用javascript来动态加载图片。

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="utf-8">
  5. <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
  6. <title>360</title>
  7. <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
  8. <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
  9. </head>
  10. <body>
  11. <divid="threesixty">
  12. <divid="spinner">
  13. <span>0%</span>
  14. </div>
  15. <olid="threesixty_images"></ol>
  16. </div>
  17. </body>
  18. </html>

4. 添加互动

代码最后，我们添加jQuery用来处理互动，threesixity.js用来处理图片幻灯。

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="utf-8">
  5. <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
  6. <title>360</title>
  7. <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
  8. <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
  9. </head>
  10. <body>
  11. <divid="threesixty">
  12. <divid="spinner">
  13. <span>0%</span>
  14. </div>
  15. <olid="threesixty_images"></ol>
  16. </div>
  17. <scriptsrc="js/heartcode-canvasloader-min.js"></script>
  18. <scriptsrc="js/jquery-1.7.min.js"></script>
  19. <scriptsrc="js/threesixty.js"></script>
  20. </body>
  21. </html>

5. 样式

我们添加threesixty.css文件。reset.css用来设置缺省的样式。首先定义#threesixty包装。缺省的图片幻灯是960x450。水平垂直居中。

  1. #threesixty {
  2. position:absolute;
  3. overflow:hidden;
  4. top:50%;
  5. left:50%;
  6. width:960px;
  7. height:540px;
  8. margin-left:-480px;
  9. margin-top:-270p
时间： 2024-12-09 12:24:51

使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果的相关文章

【细解】如何基于bootstrap创建一个响应式的导航条

本地下载 最终实现效果如下: 首先你得引入bootstrap与jquery 推荐一个CDN:http://cdn.gbtags.com/index.html 然后就是开始编写HTML代码.如果你不想更改显示效果的话实际上CSS都免去写了2333 因为HTML代码比较多 这里分为三个部分 然后最后再上一份整体HTML代码 首先如上图所示的,实现这个效果需要了解bootstrap的以下几个组件 导航条 按钮 表单 下拉菜单 实际上以上几个组件的样式有很多.我们只需要了解一部分即可 如需了解更多的请转

使用 ThreeSixty 创建可拖动的 360 度全景图片预览效果

ThreeSixty 是生成可拖动的360度预览图像序列的 jQuery 插件.只需要在你的 HTML 页面包引入最新的 jQuery 和 threesixty.js 文件就可以使用了,支持键盘上的箭头键,也支持触摸和移动设备.可以使用 nextFrame() 和 prevFrame() 绑定 UI 控件. 官方网站     在线演示     插件下载 示例 HTML: 1 <div class="threesixty" data-path="assets/img/sr

AudioPlayer.js，一个响应式且支持触摸操作的jquery音频插件

AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/audioplayer.js 你可以在右键点击上面的地址,然后选择另存为把JS文件保存到本地. 英文原文地址:http://osvaldas.info/audio-player

使用jQuery开发一个响应式超酷整合RSS信息阅读杂志

在线演示1 本地下载 申请达人,去除赞助商链接 如果大家喜欢阅读博客文章的话,可能都会使用RSS阅读器,今天这里我们将使用jQuery来开发一个响应式的RSS信息阅读应用,使用它你可以将你喜欢的RSS文章以聚合的方式显示在同一个页面,类似一本在线的杂志或者刊物,你也可以自定义配置用来设定需要访问的RSS源,希望大家喜欢! 使用的js类库和jQuery插件: jQuery jQuery cookie jQuery socialist jQuery feed Cufon jquery placeho

利用JavaScript如何创建一个table表格[第2种方法]

创建一个五行五列的表格(使用循环) <style> td{border:1px solid #ccc;} </style> <script> window.onload=function(){ var oTable=document.createElement("table"); var row; var cell; for(var i=0;i<5;i++){ row=document.createElement("tr")

响应式重构，如何把一个固定页面重构为一个响应式页面：

上周末时接到公司安排下来的任务, 要我一个人在一周内把一个项目里的所有固定页面转换为响应式的页面,14个页面,虽说做成响应式不难,但是,先理解别人的代码,然后通过修改别人的代码,把一个页面转换为一个响应式的页面,还是没有那么简单的,公司觉得这个任务简单,于是把这个任务交给了我这个新手. 在重构一个页面时,我的思路如下: 一.拿到一个页面,你首先要考虑这个页面我是该重新做呢还是在现有的基础上去修改呢? 我这是这么判断的,首先看他的html结构,是否符合响应式的要求,如果符合,就在现有的基础去修改,

利用JavaScript如何创建一个table表格

创建Table标签和定义表格头部份代码: window.onload=function(){ var arr=["编号","性别","姓名","年龄"]; var oDatas=[ { "id":1 , "gender":"男", "name" : "Javascript" , "age":30 }, { &

做一个响应式网站需要多长时间

以传统的响应式建站模式来讲,做一个响应式网站需要的时间是很长的.抛开页面设计和模块的结合,光是网站的结构和网站布局就需要花费很长时间.还没计算建站前的准备工作,网站的策划等等.所以一般让企业对响应式网站望而止步的因素不单单是建站的费用,还有就是建站的时间过长,让网站的上线收到延迟,没有办法能够抢在黄金时间上线.那做一个响应式网站要多久呢?一般以企业展示型网站来统计,找建站公司来搭建大概需要3-6个月时间,如果是自己找开发团队时间大概要2-3个月时间.所以企业对于响应式网站既是爱,又是狠. 有什么

如何评定一个响应式网站的好坏

一个响应式网站的好坏,是否受人欢迎?这些都要取决于网站的整体情况,从网站建设到网站运营,每一个步骤和环境都需要很好的统筹规划.很多人评定一个响应式网站的好坏,都只是单单的从表面的迹象来看,并没有结合整体来评定.往往光看一个响应式网站的展现方式多么炫酷,功能多么强大,却没有看网站的内容.网站的结构.页面的衔接等等的方面,就评定说这是一个好网站. 好的响应式网站该具备什么样的标准?一个好的响应式网站最基本的要求:1.访问速度快2.网站稳定3.页面整洁4.结构清晰5.没有被搜索引擎处罚过 对于怎么样评