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

xiaoren 2015-07-20

文章内容请参见原文链接：http://www.gbtags.com/gb/share/5799.htm

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

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

如何实现？

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

代码实现

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

1. 代码文件

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

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

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>
  12. </body>
  13. </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>
  18. <scriptsrc="js/heartcode-canvasloader-min.js"></script>
  19. <scriptsrc="js/jquery-1.7.min.js"></script>
  20. <scriptsrc="js/threesixty.js"></script>
  21. </body>
  22. </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:-270px;
  10. }
  11. #threesixty_images {
  12. display: none;
  13. }
 

21. 搞定，希望大家喜欢

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

文章内容请参见原文链接：http://www.gbtags.com/gb/share/5799.htm

xiaoren

xiaoren

相关推荐

原生JavaScript实现五子棋游戏

tips = "白棋胜利";

PeterLuoz / 0评论 2020-11-09

如何将Node.js中的回调转换为Promise

在几年前，回调是 JavaScript 中实现执行异步代码的唯一方法。回调本身几乎没有什么问题，最值得注意的是“回调地狱”。在 ES6 中引入了 Promise 作为这些问题的解决方案。最后通过引入 async/await 关键字来提供更好的体验并提高了可

nmgxzm00 / 0评论 2020-11-10

NodeJS开发人员常见五个错误理解

Nodejs 诞生于 2009 年，由于它使用了 JavaScript ，在这些年里获得了非常广泛的流行。它是一个用于编写服务器端应用程序的 JavaScript 运行时，但是 "它就是JavaScript" 这句话并不是 100% 正

ifconfig / 0评论 2020-10-14

JavaScript枚举选择jquery插件代码实例

聪明的朋友马上想出办法：用两个选项为周一到周日的下拉列表实现，对 那样可以，但是我觉得不够友好，所以利用业余时间写下了这个jQuery小插件。weeks: [{ text: '一', value: 2 }, { text: '二', value: 3 },

hhanbj / 0评论 2020-11-17

详解JavaScript原型与原型链

正如一些面向对象语言中所实现的那样，在JavaScript中我们有时也需要创建一个拥有公共函数与属性的类作为父类来减少代码重复、实现类型检查与实现更加清晰地代码结构。在JavaScript中，继承是通过原型链实现的。了解JavaScript的继承与原型链之

zfszhangyuan / 0评论 2020-11-16

详解JavaScript执行模型

JavaScript是一个单线程异步非阻塞并发语言，这些语言效果通过一个调用栈、一个事件循环、一个回调队列有些时候也叫任务队列与跟运行环境相关的API组成。调用栈是一个LIFO后进先出数据结构的函数运行栈，它内部的数据结构为函数帧。调用栈有一个意外情况，当

古叶峰 / 0评论 2020-11-16

4个下一个JavaScript项目的有趣API

术语API是首字母缩写词，代表“应用程序编程接口”。同样，一个API也列出了一堆开发者可以使用的操作，以及对这些操作的描述。API使开发人员可以利用平台的实现来执行一些有用的任务，从而节省时间。这也有助于减少开发人员需要为其程序编写的代码行数，因为API使

一个智障 / 0评论 2020-11-15

JavaScript是如何成为一门严肃的编程语言的

从最开始作为一种使网站变得漂亮的方式，JavaScript 已转变为一种严肃的编程语言。JavaScript 的卑微起步始于 1995 年，是由当时在 Netscape 通信公司工作的 Brendan Eich在短短 10 天内创建的。在其早期，JavaS

jipengx / 0评论 2020-11-12

7个 jQuery上手项目，Github超千人star

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功

81427005 / 0评论 2020-11-11

把 Node.js 中的回调转换为 Promise

在几年前，回调是 JavaScript 中实现执行异步代码的唯一方法。回调本身几乎没有什么问题，最值得注意的是“回调地狱”。在 ES6 中引入了 Promise 作为这些问题的解决方案。最后通过引入 async/await 关键字来提供更好的体验并提高了可

xixixi / 0评论 2020-11-11

2021适合移动和桌面应用的JavaScript框架是什么

当听到JavaScript这个词的时候，“web开发”会一下子出现在我们的脑海中，因为JavaScript在很长一段时间里一直是web应用开发最广泛使用的语言，Angular、React和Vue等框架目前也很有名。尽管JavaScript主导着web开发领

游走的豚鼠君 / 0评论 2020-11-10

一篇文章带你了解JavaScript属性

属性是一个JavaScript对象关联的值。一个JavaScript对象是一个无序的性质集合，属性通常可以更改、添加和删除，但有些只读。//复制上面代码,替换不同语句，实现功能。delete 关键字不删除继承的属性，但如果删除原型属性，则会影响从原型继承的

苗疆三刀的随手记 / 0评论 2020-11-10

16个你可能不知道的JavaScript调试技巧

对于调试JavaScript，当然是越快越好，我们在这里列举了一些如何更加快速高效调试JS的重要窍门。熟悉了解工具对于完成任务来说有着重要的作用。我们在这里列举了16个你可能不知道的调试技巧，但它们可能是你想要在下次调试JavaScript代码之前记住的。

Web卓不凡 / 0评论 2020-11-03

重学JavaScript第1集｜变量提升

变量提升就好比JavaScript引擎用一个很小的代码起重机将所有var声明和function函数声明都举起到所属作用域的最高处。这句话的意思是：如果在函数体外定义函数或使用var声明变量。在上述代码中，第一行迪马以及show函数中的第一行代码分别是在变量

小飞侠V / 0评论 2020-11-02

详解JavaScript引擎的相关概念和工作原理

此类标准定义了JavaScript引擎的工作机制和所有功能。因此，JavaScript引擎是一个程序，它可以帮助您将JavaScript代码转换为较低级别的机器代码。总的说来，诸如JavaScript和FORTRAN等高级语言都是从机器语言中抽象出来的。与

帕尼尼 / 0评论 2020-10-30

使用Chrome开发者工具研究JavaScript函数的原生实现原理

As the size of my blogChrome Development Tool tips used in my daily workturns to be larger I create a separate post to record do

爱读书的旅行者 / 0评论 2020-10-26

你应该知道的ES2020中Javascript10个新功能

好消息 - ES2020 新功能已经落地！这就意味着，现在对 ES2020 中 Javascript 的新增和改进要有一个完整的了解。让我们来看看都有哪些改变。它允许开发者在 JS 中使用更大的整数进行数据处理。之前，Javascript 中最大的整数是

帕尼尼 / 0评论 2020-10-23

2020年想成为前端开发工程师，这个学习路线收藏起来

近两年来，前端开发工程师越来越火了，薪资待遇也快接近后端开发工程师了。今天来给大家讲讲，在2020年，我们学习前端开发，应该学什么？正所谓万丈高楼平地起，我们不管是学任何一个技术，都是要从零基础开始的，学习前端开发也是同样的。CSS就是层叠样式表。使用CS

杏仁技术站 / 0评论 2020-10-23

一篇文章深入JavaScript运作原理？

您是否知道简单的JavaScript语句需要大量工作才能完成?浏览器仅理解0和1s语言，即二进制/位格式的语句。我们无法轻松地将整个JavaScript转换为位。现在，浏览器可以理解该机器代码并相应地运行。这是一些JS引擎示例。这是JavaScript引擎

淼寒儿 / 0评论 2020-10-22

JavaScript 中如何判断变量是否为数字

文本已经过 David Atanda 授权翻译。JavaScript 是一种动态类型语言，这意味着解释器在运行时确定变量的类型。当我们期望一个变量是数字时，对字符串或数组进行操作可能会在代码中导致奇怪的结果。在本文中，我们将会介绍一些判断变量是否为数字的

佐杰 / 0评论 2020-10-22

使用Chrome开发者工具研究JavaScript的垃圾回收机制

I use the following simple JavaScript code to illustrate:. Create a new empty tab in your Chrome, and first create a snapshot wi

del / 0评论 2020-10-21

JavaScript变量的内存分配，你了解多少？

JavaScript的所有变量在整个处理过程中都是存放在内存中，所以要对一个变量进行处理。JavaScript支持的数据类型可分为两大类：基本数据类型和复杂数据类型。其中基本数据类型包含了数字类型、字符串类型、布尔类型、未定义类型、空类型；复杂类型包含了对

积少成多 / 0评论 2020-10-21

使用JavaScript 创建复制&粘贴按钮

我们常常需要在屏幕上复制一些东西，或者稍后搜索，或者只是保存在某个地方，有了这些，我们就可以创建一个快速函数，用 JavaScript 来复制文本。首先，我们将创建界面，我们将做一些简单的东西，只使用 HTML。在 HTML 结构中，创建了两个输入框，作为

VitaLemon / 0评论 2020-10-17

微前端需要 JavaScript为什么？原因分析

许多微前端解决方案都是JavaScript 框架。想要高度交互的体验，而JS 在提供这些体验中发挥着至关重要的作用。除了加载速度快和可访问 Web 应用的优点外，还有其他因素应该考虑。许多JavaScript 框架都提供了 isomorphic 渲染能

BlueSkyUSC / 0评论 2020-10-15

通过阶乘的例子,练习在JavaScript, Scala和ABAP里实现尾递归

Before we start to research tail recursion, let’s first have a look at the normal recursion.Let N = 5, see how new stack frame i

匆匆那些年 / 0评论 2020-10-15

一分钟入门 Babel（下一代 JavaScript 语法的编译器）

我们假设取名index.js，放在项目根目录的src文件夹里。其实跟第一种差不多。我们需要自己在scripts字段里添加命令，命令内容与第一种方法的一样，这里只不过省了--presets es2015。这里 ES6+ 说的是ES6、ES7、ES8等。在根目

82530995 / 0评论 2020-10-15

javascript 异步编程

笼统地说，异步在javascript就是延时执行。严格来说，javascript中的异步编程能力都是由BOM与DOM提供的，如setTimeout，XMLHttpRequest，还有DOM的事件机制，还有HTML5新增加的webwork, postMess

VitaLemon / 0评论 2020-10-15

微软推出 JavaScript 免费在线教程视频

有一种流行的说法是这样的：“任何可以用JavaScript来写的应用，最终都将用JavaScript来写。”这还被称为阿特伍德定律，它强调了语言的灵活性：JavaScript已经无处不在，它的受欢迎程度只会继续增长。简而言之，JavaScript已经变得无

梦的天空 / 0评论 2020-10-15

重学JavaScript（函数）闭包

我们知道，作用域链查找标识符的顺序是从当前作用域开始一级一级往上查找。因此，通过作用域链，JavaScript函数内部可以读取函数外部的变，但反过来，函数的外部通常则无法读取函数内部的变量。在实际应用中，有时需要真正在函数外部访问函数内部的局部变量，此时最

yuwinter / 0评论 2020-10-14

ES2020中JavaScript 10个你应该知道的新功能

好消息 - ES2020 新功能已经落地！这就意味着，现在对 ES2020 中 Javascript 的新增和改进要有一个完整的了解。让我们来看看都有哪些改变。它允许开发者在 JS 中使用更大的整数进行数据处理。之前，Javascript 中最大的整数是

MyNameIsXiaoLai / 0评论 2020-10-14

你需要了解的几种 JavaScript 异常类型

无论是浏览器控制台还是 Node.js 的服务端，我们会在各种地方看到 JavaScript 异常，异常处理是编写程序必备的基础能力，在学习异常处理之前，了解 JavaScript 中的几种异常类型是非常有必要的。Error 对象主要有两个重要属性 me

yejinfu / 0评论 2020-10-13

「Node.js系列」深入浅出讲解V8引擎如何执行JavaScript代码

浏览器内核的真实结构；浏览器渲染引擎的工作过程；V8引擎的工作原理；浏览器和Node.js架构的区别和练习；Node.js架构的REPL使用；之后会保持每周1~2篇的Node.js文章，欢迎大家和我一起学习大前端进阶系列。题目中说到的V8引擎，大家自然会联

玫瑰余香000 / 0评论 2020-10-12

如何避免 JavaScript 开发者常犯的 9 个错误？

JavaScript 是一种给网页添加功能和交互的脚本语言，对于使用不同编程语言的初学者来说很容易理解。有了一些教程，你就可以马上开始使用它了。但很多初学者都会犯一些常见的错误。在这篇文章中，我们将介绍 9 个常见的错误以及它们的解决方案，帮助你成为更好的

xixixi / 0评论 2020-10-09

9月份Github上热门的JavaScript开源项目

Day.js是一个仅2kb大小的轻量级 JavaScript 时间日期处理库，和Moment.js的API设计保持完全一样。这是一份全面且详尽的JavaScript和Node.js测试最佳实践。

maple00 / 0评论 2020-10-08

JavaScript 语言通识 — 重学 JavaScript

在这个重学系列的课程中，都会假设大家对 JavaScript、CSS、HTML 有了一定的了解。而这个重学的过程其实是帮助我们在这些过去的知识里面建立一个新的秩序，也就是建立知识体系的过程。在重学 JavaScript 的过程将会带着大家以 JavaS

帕尼尼 / 0评论 2020-09-29

比较JavaScript中的数据结构（数组与对象）

在编程中，如果你想继续深入，数据结构是我们必须要懂的一块， 学习/理解数据结构的动机可能会有所不同，一方面可能是为了面试，一方面可能单单是为了提高自己的技能或者是项目需要。无论动机是什么，如果不知道什么是数组结构及何时使用应用字们，那学数据结构是一项繁琐

LauraRan / 0评论 2020-09-28

这个小技巧完全改变了访问JavaScript嵌套对象的方式！

JavaScript以众多技巧出名，了解JavaScript的所有技巧几乎不可能。最近在浏览JavaScript的相关文件，阅读相关话题时我又发现了一个从没见过的功能点。我大概不是最后一个学到这个技巧的人，所以我想与各位分享。它完全改变了我访问嵌套对象的方

BlueSkyUSC / 0评论 2020-09-27

检查 JavaScript 变量是否为数字的几种方式

JavaScript 是一种动态类型的语言，这意味着解释器是在运行时确定变量类型的。这允许我们可以用同一变量中存储不同类型的数据。但是如果没有文档和保持一致性，在使用代码时，我们很有可能并不知道变量究竟是哪种类型。当我们打算对数字进行操作时，如果对字符串

Radar / 0评论 2020-09-26

2020年，JavaScript开发人员必备的5项高薪技能

开发人员的一生可以用两句话概括：计算器，以及学习新技能。成为开发人员绝非易事，他们是解决问题的人，也是不断学习的人。科技世界每天都在快速变化，如果你不想在这条快速变化的道路上落后，就必须不断学习新技能。不断升级，绝不止步。人们对React开发商的需求并未出

小飞侠V / 0评论 2020-09-25

JavaScript 中的函数式编程：函数，组合和柯里化

面向对象编程和函数式编程是两种非常不同的编程范式，它们有自己的规则和优缺点。但是，JavaScript 并没有一直遵循一个规则，而是正好处于这两个规则的中间，它提供了普通OOP语言的一些方面，比如类、对象、继承等等。但与此同时，它还为你提供了函数编程的一

81244053 / 0评论 2020-09-23

我从GitHub上看到了编程语言八年变迁史

最近，一位博主PieChartPirate统计了从2012年6月-2020年6月GitHub上最受欢迎的编程语言，看到了整个语言的变迁史，一直稳居第一宝座的是JavaScript。这一结果分享在Reddit上，三天就获得了30.7k热度。有网友惊讶，R语言

JakobHu / 0评论 2020-09-20

前端模块化的前世

随着前端项目的越来越庞大，组件化的前端框架，前端路由等技术的发展，模块化已经成为现代前端工程师的一项必备技能。无论是什么语言一旦发展到一定地步，其工程化能力和可维护性势必得到相应的发展。尽管早期 JavaScript 语言规范上不支持模块化，但这并没有阻止

拾光璇旅 / 0评论 2020-09-17

重新认识Typescript | Vue3源码系列

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.大致意思

changcongying / 0评论 2020-09-17

学Javascript看什么书？这些书不能错过

JavaScript是一种属于网络的脚本语言，被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。本篇文章就来给大家推荐一些学习JavaScript的书籍，希望对大家有所帮助!该书非常适合初级中级JavaScrip

yanchuncheng / 0评论 2020-09-16

仅用18行JavaScript构建一个倒数计时器

有时候，你会需要构建一个JavaScript倒计时时钟。你可能会有一个活动、一个销售、一个促销或一个游戏。尽管有很多很棒的时钟插件，但是使用原生JavaScript可以带来以下好处：。你的代码将是轻量级的，因为它将具有零依赖性。你的网站将表现得更好。你不需

CXsilent / 0评论 2020-09-16

JavaScript 如何计算文本的行数的实现

思路：用2个块统计行高，一个不加高度限制用来统计行数，一个加高度限制用来显示。当然总高度的计算必须是文字所在的 DOM 没有对高度的限制，随着文本的增加 DOM 要随之变高才行；最后还要考虑 DOM 的样式padding和margin对高度的影响。总结一下

huaoa / 0评论 2020-09-14

2020年面向初学者的优秀TypeScript书籍

TypeScript是时下最流行的前端开发语言之一，由于TypeScript往往会和其他框架生态和概念混合在一起，因此TypeScript也是当下比较难以难掌握和学习的语言之一。学习TypeScript需要理论联系实际，在学习基本概念的同时，还要注重动手实

淼寒儿 / 0评论 2020-09-13

半天掌握TypeScript，感觉就像写Java

本文转载自微信公众号「小姐姐味道」，作者小姐姐养的狗 。但是，JavaScript是个拦路虎，尤其是熟悉了Java之类的强类型检查语言之后，每次看到js都感觉不爽。万幸现在有了更好的选择。意思就是在ts中可以直接书写js。不过，这也只是类比而已，ts中的很

lyjava / 0评论 2020-09-11

8月份Github上热门的JavaScript开源项目排行

React是Facebook开发的用于构建用户界面的JavaScript库，现已为很多公司所用，因为它采用了一种不同的方式来构建应用：借助于React，开发者可以将应用分解为彼此解耦的独立组件，这样就可以独立维护并迭代各种组件了。Zettlr是一款非常适合

jipengx / 0评论 2020-09-10

JavaScript启动性能瓶颈分析与解决方案

在 Web 开发中，随着需求的增加与代码库的扩张，我们最终发布的 Web 页面也逐渐膨胀。不过这种膨胀远不止意味着占据更多的传输带宽，其还意味着用户浏览网页时可能更差劲的性能体验。浏览器在下载完某个页面依赖的脚本之后，其还需要经过语法分析、解释与运行这些步

淼寒儿 / 0评论 2020-09-09