推荐一个HTML5下的翻书效果插件turnjs

要想在ipad等上做翻书的效果&＃xff1f;以前看起来比较麻烦&＃xff0c;现在就简单多了&＃xff0c;

强烈推荐一个叫turn.js的效果&＃xff0c;网站在http://www.turnjs.com

&＃xff0c;使用起来很简单&＃xff0c;另外有一篇不错的教程&＃xff0c;是jquery&＃43;turn.js&＃43;php的&＃xff0c;用来获得在

Instagram上的图片&＃xff0c;地址在&＃xff1a;

http://tutorialzine.com/2012/03/instagram-magazine-php-jquery/



下面简单小结下turn.js的用法&＃xff0c;













这里&＃xff0c;只需要要显示的层的ID命名为magzine即可&＃xff0c;然后用PHP读数据库&＃xff0c;生成相关的页面图片如下







相关的CSS&＃xff1a;

#magazine{

width:800px;

height:400px;

}

#magazine .turn-page{

width:400px;

height:400px;

background-color:#ccc;

}



然后jquery中调用&＃xff1a;

$(function(){



var mag &＃61; $(&＃39;#magazine&＃39;);



//调用插件的turn方法

mag.turn();



mag.bind(&＃39;turned&＃39;, function(e, page, pageObj) {



if(page &＃61;&＃61; 1 && $(this).data(&＃39;done&＃39;)){

//如果是首页&＃xff0c;可以进行一些样式的设计

mag.addClass(&＃39;centerStart&＃39;).removeClass(&＃39;centerEnd&＃39;);

}



//如果是封底&＃xff0c;进行一些样式的设计

else if (page &＃61;&＃61; 32 && $(this).data(&＃39;done&＃39;)){

mag.addClass(&＃39;centerEnd&＃39;).removeClass(&＃39;centerStart&＃39;);

}

else {

mag.removeClass(&＃39;centerStart centerEnd&＃39;);

}



});



setTimeout(function(){



mag.fadeTo(500,1);

},1000);



//控制当使用键盘的前后键&＃xff0c;也可以进行控制

$(window).bind(&＃39;keydown&＃39;, function(e){



// listen for arrow keys



if (e.keyCode &＃61;&＃61; 37){

mag.turn(&＃39;previous&＃39;);

}

else if (e.keyCode&＃61;&＃61;39){

mag.turn(&＃39;next&＃39;);

}



});



});