首页 > 经验 > 关键词 > Javascript最新资讯 > 正文

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

2015-07-20 15:57 · 稿源:极客标签

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。在中我们设置了移动设备的viewport,使得内容不支持缩放。添加俩个文件

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

     <head>
    <metacharset="utf-8">
    <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
    <title>360</title>
    <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
    <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
    </head>
    <body>
    </body>
    </html>

3. 加载进度条

创建一个

来容纳幻灯。其中包含一个,用来包含图片序列 ,同时也包含了一个来显示进度条。我们将使用javascript来动态加载图片。

    <!DOCTYPE html>
    <htmllang="en">
    <head>
    <metacharset="utf-8">
    <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
    <title>360</title>
    <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
    <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
    </head>
    <body>
    <divid="threesixty">
    <divid="spinner">
    <span>0%</span>
    </div>
    <olid="threesixty_images"></ol>
    </div>
    </body>
    </html>

4. 添加互动

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

    <!DOCTYPE html>
    <htmllang="en">
    <head>
    <metacharset="utf-8">
    <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
    <title>360</title>
    <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
    <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
    </head>
    <body>
    <divid="threesixty">
    <divid="spinner">
    <span>0%</span>
    </div>
    <olid="threesixty_images"></ol>
    </div>
    <scriptsrc="js/heartcode-canvasloader-min.js"></script>
    <scriptsrc="js/jquery-1.7.min.js"></script>
    <scriptsrc="js/threesixty.js"></script>
    </body>
    </html>

5. 样式

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

    #threesixty {
    position:absolute;
    overflow:hidden;
    top:50%;
    left:50%;
    width:960px;
    height:540px;
    margin-left:-480px;
    margin-top:-270px;
    }
    #threesixty_images {
    display: none;
    }
  • 相关推荐
  • 大家在看
  • 京东:今日在港公开发售 最高公开发售价为236港元/股

    今日,京东在港交所公告称, 6 月 8 日(星期一)上午九时开始香港公开发售,预期 6 月 11 日(星期四)定价, 6 月 18 日上午九时正在香港联交所交易。在港上市最高公开发售价为 236 港元/股,将发行1. 33 亿股发售股份。

  • BSN合格开发者介绍——米链科技

    2020 年 6 月 1 日,杭州米链科技有限公司正式成为国家级区块链服务网络BSN的合格开发者资格,将为BSN的开发者提供专业技术支持。BSN是由国家信息中心、中国移动、中国银联等机构共同发起组建的一个跨云服务、跨门户、跨底层架构,用于部署和运行区块链应用的全球性公共基础设施网络。BSN是全球首个由中国自主创新并控制入网权的网络基础设施网络,可在全球进行快速部署。区块链服务网络(Blockchain-based Service Network)(以?

  • IBM退出面部识别 将不再开发或研究该技术

    外媒报道称,在6月8日本周一,IBM首席执行官阿里德·克里希纳(Arvind Krishna)在致美国国会的一封信中说,IBM将不再提供通用的面部识别或分析软件。IBM表示,该公司也将不再开发或研究该技术。

  • 因认为PPT太呆板,她一气之下开发了自己的演示软件

    Digidecks是一款多媒体幻灯片软件,它的诞生非常戏剧性,源自于创始人Angelina Lawton(安吉丽娜·劳顿)对PPT的不满。当时,劳顿正在为Tampa Bay Lightning(坦帕湾闪电队)宣传。她无法接受的是,这样一支令人兴奋的专业曲棍球队竟然用如此呆板的形式向潜在赞助商推广。

  • 苹果或将开发可折叠iPhone 机身圆润无刘海

    据知名苹果爆料大神Jon Prosser透露,苹果正在开发一款可折叠的iPhone原型机。和以往采用一块柔性屏幕折叠的折叠屏手机不同,苹果的可折叠手机是将两个独立的显示面板通过铰链连接,中框为带弧度的不锈钢材质,在设计语言上和目前的iPhone11 差不多,无刘海,但在显示屏外侧有一个 "小小的额头",用于Face ID。不过,该爆料人认为,可折叠的iPhone今年上市的可能性不大。

  • 京东今日在港公开发售 定价上限236港元

    今日,京东在港发布公告称,今日上午九时开始香港公开发售,预期 6 月 11 日(星期四)定价, 6 月 18 日上午九时正在香港联交所交易,在港公开发售定价上限为 236 港元,将发行1. 33 亿股发售股份。

  • 马斯克:SpaceX的首要任务是开发星际飞船

    【TechWeb】6月8日消息,据国外媒体报道,美国太空探索技术公司SpaceX的首席执行官(CEO)埃隆·马斯克(Elon Musk)在一封电子邮件中表示,该公司的首要任务是开发星际飞船(Starship)。此外,他还在邮件中呼吁员工加快星际飞船项目的开发速度。SpaceX是获得美国宇航局(NASA)总计10亿美元资助的三家公司之一,它将开发能够将货物和人类送往月球的登月系统。据悉,该公司将用星际飞船作为着陆器,而这艘飞船将通过其Super Heav

  • TypeScript 热度超 C 与 Python、Go 开发收入高、运维吃香,调查了 65000 名开发者有这些发现!

    近十年来,Stack Overflow的年度开发者调查问卷被誉为全球范围内最大的开发者调查。为了寻求多样化的代表,Stack Overflow的官方将调查问卷从技术和行为等方面提出了各类问题,希望收集的信息能够帮助改善Stack Overflow开发者的社区。

  • 李楠评价苹果WWDC:果然是抄袭到全球开发者哭泣的大会

    6月23日消息,一位知友在知乎提问,如何评价2020年苹果全球开发者大会?李楠表示,那些Android十年前就实现的东西不说了,果然是抄袭到全球开发者哭泣的大会。李楠指出,苹果WWDC有意思的地

  • 开发者:苹果不会让iOS 14对外支持通话录音功能

    之前曾有外媒给出消息称,苹果将会在iOS 14上增加通话录音功能,这让不少用户期待不已。从曝光的截图上看,用户需要获得通话人员的同意才能启用通话录音功能,并且在通话过程中严禁与他人共享

  • 日本NTT与NEC将合作开发5G通信技术 避免依赖海外

    6月28日消息,据国外媒体报道,日本NTT(日本电报电话公司)与NEC(日本电气)日前宣布,将就5G移动通信等技术开发进行资本和业务合作。NTT外媒表示,日本正推动5G建设利用国产设备,避免依赖海外。NTT将接受NEC的定向增发,出资约644亿日元(约合人民币42亿元),NTT出资比例约4.8%。NTT出资瞄准的是长期合作。两家公司不仅合作研发5G技术,还将联合开发6G超高速无线、海底光缆等新技术。今年3月,日本三大运营商NTT?

  • 诺基亚宣布与博通合作开发5G芯片 包括定制处理器

    6月16日消息,据国外媒体报道,诺基亚公司(Nokia)周一宣布,与博通(Broadcom)合作开发5G芯片。诺基亚合作范围包括新的定制处理器,处理器将被整合至诺基亚“由ReefShark驱动的5G”组合中。诺基亚表示,部署ReefShark芯片组,可以使5G运营商受益于体积和能耗的降低,同时也能在降低总持有成本的情况下提高容量和整体性能。诺基亚还表示,此次合作进一步扩大诺基亚ReefShark芯片组适用于5G解决方案的范围,并将改善5G网?

  • Chromium与Go开发者提议替换“blacklist”与“slave”等词

    ​最近美国引发的“Black Lives Matter”运动使得各种抗议声音不断,技术圈也有支持这一运动的行动。从源码中的一个新 commit 来看,Chromium 有开发者提议移除“blacklist(黑名单)”这样的字眼。

  • 京东香港上市 今日开始公开发行1.33亿股

    6月8日,电商平台京东将在港交所正式公开发售,根据招股书显示,京东将在港交所最高公开发售价为 236 港元/股,将发行1. 33 亿股发售股份。

  • 京东今日在港公开发售 预计发行1.33亿股

    电商平台京东在港交所发布公告,将于6月6日上午九时开始香港公开发售,预期 6 月 11 日(星期四)定价, 6 月 18 日(星期四)上午九时正在香港联交所交易。在港上市最高公开发售价为236港元/股,将发行1. 33 亿股发售股份。

  • 云计算开发学习笔记:Python3运算符

    首先我们来了解下什么是Python的运算符? 举个简单的例子 3+6=9 。例子中,3和6被称为操作数,"+" 称为运算符。Python中的运算符大部分与C语言的类似,但也有很多不同的地方。这里就大概地罗列一下Python3中的运算符。Python语言支持的运算符类型有以下几种:算术运算符,比较运算符,赋值运算符,逻辑运算符,位运算符,成员运算符,身份运算符,运算符优先级。Python算术运算符以下假设变量a为10,变量b为21:Python比

  • 安卓手机新功能对标苹果AirDrop 谷歌开发NearbyShare

    近日,有外媒报道称,谷歌已经为Android开发了一个类似于Airdrop的文件共享功能“Nearby Share”,可支持附近的Android设备之间快速无线传输文件。据悉谷歌文件显示,该共享服务可在Windows、macOS、Linux乃至Chrome OS的PC上运行。

  • 创新重构科技未来 华为携手全球开发者让更多美好发生

    6 月 30 日,华为HMS全球应用创新大赛正式启动,华为宣布耀星计划为本次大赛特设 100 万创新激励奖金,鼓励更多开发者集成HMS Core,创新应用体验。目前,HMS全球生态步伐持续加速,全球集成HMS Core的应用数量超过 6 万,越来越多的开发者正在与华为一起为全球消费者带来全场景智慧生活体验,通过应用创造更多社会价值和创新体验。 大赛线上启动仪式上,华为分享了来自全球开发者的创新应用案例:小艾助视器助力视障人群更好地认?

  • 微软开发恢复严重退化老照片新算法:瞬间清晰、还原原汁原味的美

    对于那些严重退化的老照片,微软也是给出了新的解决办法。微软研究院研究团队Ziyu Wan、Zhang Bo等人开发了一种基于人工智能的新算法,其可以通过深度学习的方法恢复严重退化的老照片。跟可以

  • 台媒:台积电投入300人研发团队 协助苹果开发Mac芯片

    【TechWeb】6月24日消息,据台湾媒体报道,苹果日前发布的自研Mac芯片,台积电也起到了关键作用。台积电台媒称,台积电以300人研发团队投入开发,协助苹果笔电告别英特尔。并且台积电团队仍未功成身退,还在协助后续研发。台媒援引业内人士评论称,苹果能摆脱英特尔X86架构处理器,轻松切入ARM架构,台积电起了很大作用。台积电与ARM长期保持良好的合作关係,双方于2019年共同发布业界首款7nm ARM核心的CoWoS小晶片系统,其中内建

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议

热文

  • 3 天
  • 7天