javascript制作幻灯片(360度全景图片)


Posted in Javascript onJuly 28, 2015

在给客户做产品演示时经常会用到幻灯片,拥有360度的全景图片效果给用户带来好的体验价值。在这里给大家介绍一款来自Robert Pataki的360全景幻灯实现教程,此款教程使用js来实现一个超酷的全景幻灯,具体内容如下:

在这个教程中没有使用到任何插件,我们将使用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样式。

<!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>
</body>
</html>

3. 加载进度条

创建一个<div>来容纳幻灯。其中包含一个<ol>,用来包含图片序列<li>,同时也包含了一个<span>来显示进度条。我们将使用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:-270p

以上内容就是应用javascript制作幻灯片的全部内容,希望大家喜欢。

Javascript 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
学习ExtJS TextField常用方法
Oct 07 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 #Javascript
javascript解决IE6下hover问题的方法
Jul 28 #Javascript
JavaScript如何自定义trim方法
Jul 28 #Javascript
详解JavaScript ES6中的Generator
Jul 28 #Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 #Javascript
JavaScript调用客户端Java程序的方法
Jul 27 #Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 #Javascript
You might like
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
PHP 微信支付类 demo
2015/11/30 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
20招让你的Python飞起来!
2016/09/27 Python
Python实现感知机(PLA)算法
2017/12/20 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
python批量修改文件编码格式的方法
2018/05/31 Python
Python Flask框架扩展操作示例
2019/05/03 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
PyQt5实现简单的计算器
2020/05/30 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
如何整合JQuery和Prototype
2014/01/31 面试题
四个太阳教学反思
2014/02/01 职场文书
护士的自我鉴定
2014/02/07 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
通知函格式范文
2015/04/27 职场文书
婚庆主持词大全
2015/06/30 职场文书