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

HTML首先，我们需要做好今天的例子的基础。我们将使用一个单一的页面，在同一个文件中结合HTML5标记和PHP,使之更为简明。你可以看到生成的布局如下： index.php            

    我们把CSS文件包含在头部，js文件包含在底部。然后初始化js插件和监听键盘事件。PHP代码将写在#magazine div中。举个例子，这里是前三页的杂志的标记：Generated code

 

  1 // 32   

 

 

 

  2 // 32   

 

 

 

  3 // 32   

 

PHPPHP代码的任务是和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': '3414783'  },  'type': 'image',  'id': '4568888_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){ ?> 

 

  '> //   ' alt='' /> 

 

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');  }  }); });