缓存很简单：我们使用的是一个临时的文件 - cache.txt的 - 存储图像阵列的序列化表示。如果缓存文件是不存在的，或超过一个多小时，我们发出了一个新的API请求。
jQuery
使用turn.js是非常简单。
assets/js/script.js
[html]
- $(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将处理其余部分。
[html]
- #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。
