教你用turn.js制作一个炫丽的翻页杂志
这个翻页效果使用的是典型的Flash动画翻页效果,在网络上,随着时间的推移,其受欢迎程度下降,经过点小改造可以让他用在移动设备上。
在本教程中,我们将使用PHP和turn.js插件,纯CSS3和jQuery的页面翻页效果来实现,建立一本漂亮的杂志。
HTML
首先,我们需要做好今天的例子的基础。我们将使用一个单一的页面,在同一个文件中结合HTML5标记和PHP,使之更为简明。你可以看到生成的布局如下:
index.php
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" /> <title>用turn.js制作一个翻页杂志</title>
<!-- 导入css -->
<link rel="stylesheet" href="http://www.web0752.com/assets/css/styles.css" />
<!--[如果是IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body> <div id="magazine" class="centerStart">
</div> <!-- 引入turn.js和我们自己的script.js -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://www.web0752.com/assets/js/turn.js"></script>
<scriptsrc="http://www.web0752.com/assets/js/script.js"></script>
</body>
</html>
我们把CSS文件包含在头部,js文件包含在底部。然后初始化js插件和监听键盘事件。PHP代码将写在#magazine div中。
举个例子,这里是前三页的杂志的标记:
Generated code
<div id="page1" class="page">
<div class="img1">
<span class="pageNum right">1 // 32</span>
<img src="http://www.web0752.com/assets/img/cover.jpg" alt="Cover" />
</div>
</div>
<div id="page2" class="page">
<div class="img2">
<span class="pageNum left">2 // 32</span>
<img src="http://www.web0752.com/images/logo.gif" alt="网站建设logo" />
</div>
</div>
<div id="page3" class="page">
<div class="img3">
<span class="pageNum right">3 // 32</span>
<img src="http://www.web0752.com/images/logo.gif" alt="网站建设logo" />
</div>
</div>
PHP
这里是目前一个流行的JSON响应图像的Instagram例子。我省略了一些属性,使代码更易于阅读。
Popular images JSON response
{ "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.instagram.com\/03c80dd86f7911e1a87612313804ec91_6.jpg",
"width": 306,
"height": 306
},
"thumbnail": {
"url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_5.jpg",
"width": 150,
"height": 150
},
"standard_resolution": {
"url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_7.jpg",
"width": 612,
"height": 612
}
},
"caption": {
"created_time": "1331910148",
"text": "Goodnight.\ue056",
"from": {
"username": "jent99",
"profile_picture": "http:\/\/images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg",
"id": "6227738",
"full_name": "jent99"
},
"id": "148395540733414783"
},
"type": "image",
"id": "148395420004568888_6227738",
"user": {
"username": "jent99",
"website": "",
"bio": "Mostly nature pics.\ue32b\ue32b\ue32b Hope you like them.\ue056\ue32a \ue334gi\ue334 ",
"profile_picture": "http:\/\/images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg",
"full_name": "jent99",
"id": "6227738"
}
}, {
/* More photos here*/
}]
}
API限制最多只能返回32张图片,但对于我们来说已经足够了。每张图片有三个尺寸,但是我们用普通的就可以。
PHP缓存API调用的结果,使得Instagram每小时请求服务器只有一次,这使得我们的程序请求和响应服务器的数量得到控制。
index.php
// 你可以从Instagram API取得页面的客户端ID
$instagramClientID = '-- place your client id key here --';
$api = 'https://api.instagram.com/v1/media/popular?client_id='.$instagramClientID;
$cache = 'cache.txt';
if(file_exists($cache) && filemtime($cache) > time() - 60*60){
// If a cache file exists, and it is
// fresher than 1 hour, use it
$images = unserialize(file_get_contents($cache));
}
else{
// 触发API请求和创建缓存文件
//取得图象
$response = file_get_contents($api);
$images = array();
// Decode the response and build an array
foreach(json_decode($response)->data as $item){
$title = '';
if($item->caption){
$title = mb_substr($item->caption->text,0,70,"utf8");
}
$src = $item->images->standard_resolution->url;
$images[] = array(
"title" => htmlspecialchars($title),
"src" => htmlspecialchars($src)
);
}
// Remove the last item, so we still have
// 32 items when when the cover is added
array_pop($images);
// Push the cover in the beginning of the array
array_unshift($images,array("title"=>"Cover", "src"=>"assets/img/cover.jpg"));
// Update the cache file
file_put_contents($cache,serialize($images));
}
# Generate the markup
$totalPages = count($images);
foreach($images as $i=>$image){
?>
<div id="page<?php echo $i+1?>" class="page">
<div class="img<?php echo $i+1?>">
<span class="pageNum <?php echo ($i+1)%2? 'right' : 'left'?>"><?php echo $i+1?> // <?php echo $totalPages?></span>
<img src="<?php echo $image['src']?>" alt="<?php echo $image['title']?>" />
</div>
</div>
<?php
}
缓存很简单:我们使用的是一个临时的文件 - cache.txt的 - 存储图像阵列的序列化表示。如果缓存文件是不存在的,或超过一个多小时,我们发出了一个新的API请求。
使用turn.js是非常简单。
assets/js/script.js
$(function(){
var mag = $('#magazine');
// initiazlie turn.js on the #magazine div
mag.turn();
// turn.js defines its own events. We are listening
// for the turned event so we can center the magazine
mag.bind('turned', function(e, page, pageObj) {
if(page == 1 && $(this).data('done')){
mag.addClass('centerStart').removeClass('centerEnd');
}
else if (page == 32 && $(this).data('done')){
mag.addClass('centerEnd').removeClass('centerStart');
}
else {
mag.removeClass('centerStart centerEnd');
}
});
setTimeout(function(){
// Leave some time for the plugin to
// initialize, then show the magazine
mag.fadeTo(500,1);
},1000);
$(window).bind('keydown', function(e){
// listen for arrow keys
if (e.keyCode == 37){
mag.turn('previous');
}
else if (e.keyCode==39){
mag.turn('next');
}
});
});
CSS
我们需要建立明确的尺寸的杂志和风格的页面和页码。 turn.js将处理其余部分。
#magazine{
width:1040px;
height:520px;
margin:0 auto;
position:relative;
left:0;
opacity:0;
-moz-transition:0.3s left;
-webkit-transition:0.3s left;
transition:0.3s left;
}
#magazine .page{
width:520px;
height:520px;
background-color:#ccc;
overflow:hidden;
}
/* Center the magazine when the cover is shown */
#magazine.centerStart{
left:-260px;
}
/* Center the magazine when the last page is shown */
#magazine.centerEnd{
left:260px;
}
.page img{
height:520px;
width:520px;
display:block;
}
/* Show a dark shadow when the cover is shown */
.centerStart .turn-page-wrapper:first-child{
box-shadow:0 0 10px #040404;
}
/* Page Numbers */
span.pageNum{
background-color: rgba(0, 0, 0, 0.3);
bottom: 25px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
color: #FFFFFF;
font-size: 11px;
height: 24px;
line-height: 22px;
opacity: 0.9;
position: absolute;
text-align: center;
width: 55px;
}
span.pageNum.left{
left:0;
right:auto;
}
span.pageNum.right{
left:auto;
right:0;
}
/* Hide the page number on the cover */
#page1 .pageNum{
display:none;
}
我们就大功告成了!
这个例子可以在所有最新的浏览器 - 火狐,Chrome,Safari,Opera和甚至IE浏览器。它甚至可用iOS和Android。
这个例子可以在所有最新的浏览器 - 火狐,Chrome,Safari,Opera和甚至IE浏览器。它甚至可用iOS和Android。