教你用turn.js制作一个炫丽的翻页杂志
标签：网站建设 turn.js 翻页杂志
这个翻页效果使用的是典型的Flash动画翻页效果,在网络上，随着时间的推移，其受欢迎程度下降，经过点小改造可以让他用在移动设备上。
在本教程中，我们将使用PHP和turn.js插件，纯CSS3和jQuery的页面翻页效果来实现，建立一本漂亮的杂志。
HTML
首先，我们需要做好今天的例子的基础。我们将使用一个单一的页面，在同一个文件中结合HTML5标记和PHP,使之更为简明。你可以看到生成的布局如下：
index.php
[html]
- > <html>
<head>
<meta charset="utf-8" /> <title>用turn.js制作一个翻页杂志title>
<link rel="stylesheet" href="http://www.web0752.com/assets/css/styles.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js">script>
<script src="http://www.web0752.com/assets/js/turn.js">script>
<scriptsrcscriptsrc="http://www.web0752.com/assets/js/script.js">script>
body>
html>
我们把CSS文件包含在头部，js文件包含在底部。然后初始化js插件和监听键盘事件。PHP代码将写在#magazine div中。
举个例子，这里是前三页的杂志的标记：
Generated code
[html]
- <div id="page1" >
<div >
<span >1 // 32span>
<img src="/Admin/eWebEditor/UploadFile/201242794247547.jpg" alt="Cover" />
div>
div>
<div id="page2" >
<div >
<span >2 // 32span>
<img src="/Admin/eWebEditor/UploadFile/201242794247189.gif" alt="网站建设logo" />
div>
div>
<div id="page3" >
<div >
<span >3 // 32span>
<img src="/Admin/eWebEditor/UploadFile/201242794247189.gif" alt="网站建设logo" />
div>
div>
PHP
PHP代码的任务是和Instagrna的API通信，获取数据结果，生成上面所看到的标记。
这里是目前一个流行的JSON响应图像的Instagram例子。我省略了一些属性，使代码更易于阅读。
Popular images JSON response
[html]
- { "meta": {
"code": 200
},
"data": [{
"tags": ["beautiful", "sky"],
"location": "null",
"comments": {
"count": 31,
"data": [...]
},
"filter": "Normal",
"created_time": "1331910134",
"link": "http:\/\/instagr.am\/p\/IPNNknqs84\/",
"likes": {
"count": 391,
"data": [..]
},
"images": {
"low_resolution": {
"url": "http:\/\/distilleryimage8.
