教你用turn.js制作一个炫丽的翻页杂志

最新推荐文章于 2024-03-17 09:44:57 发布

0307wgj

最新推荐文章于 2024-03-17 09:44:57 发布

阅读量1.8k

点赞数

分类专栏：网站设计文章标签： class cache api function image stylesheet

本文链接：https://blog.csdn.net/seo68/article/details/7514089

版权

网站设计专栏收录该内容

15 篇文章 0 订阅

订阅专栏

教你用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

PHP代码的任务是和Instagrna的API通信，获取数据结果，生成上面所看到的标记。

这里是目前一个流行的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请求。

jQuery

使用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。