Home  >  Article  >  Web Front-end  >  javascript制作幻灯片(360度全景图片)_表单特效

javascript制作幻灯片(360度全景图片)_表单特效

WBOY
WBOYOriginal
2016-05-16 15:48:391689browse

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

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

如何实现?

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

代码实现

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

1. 代码文件

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

360度全景图片查看幻灯效果

2.  新的项目

创建一个HTML文件index.html。在

中我们设置了移动设备的viewport,使得内容不支持缩放。添加俩个文件

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






360



3. 加载进度条

创建一个

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

4. 添加互动

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






360



0%

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制作幻灯片的全部内容,希望大家喜欢。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:使用Browserify配合jQuery进行编程的超级指南_jqueryNext article:AngularJS的一些基本样式初窥_AngularJS

Related articles

See more