这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了应用 javascript 制作幻灯片(360 度全景图片),在做产品演示时,经常会用到幻灯片,这里我给大家整理了一款非常不错的的 360 度全景幻灯片实现教程, 需要的朋友可以参考下
在给客户做产品演示时经常会用到幻灯片,拥有 360 度的全景图片效果给用户带来好的体验价值。在这里给大家介绍一款来自 Robert Pataki 的 360 全景幻灯实现教程,此款教程使用 js 来实现一个超酷的全景幻灯,具体内容如下:
在这个教程中没有使用到任何插件,我们将使用 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 样式。
- <!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 制作幻灯片的全部内容,希望大家喜欢。
来源: http://www.phperz.com/article/17/0409/270261.html