推荐一个HTML 5下的翻书效果插件turn js

要想在ipad等上做翻书的效果?以前看起来比较麻烦,现在就简单多了,
强烈推荐一个叫turn.js的效果,网站在http://www.turnjs.com
,使用起来很简单,另外有一篇不错的教程,是jquery+turn.js+php的,用来获得在
Instagram上的图片,地址在:
http://tutorialzine.com/2012/03/instagram-magazine-php-jquery/

下面简单小结下turn.js的用法,
<div id="magazine" class="centerStart">


</div>

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="assets/js/turn.js"></script>

这里,只需要要显示的层的ID命名为magzine即可,然后用PHP读数据库,生成相关的页面图片如下
<div id="magazine" class="centerStart">

<div id="page1" class="page">
<div class="img1">

<span class="pageNum right">1 // 32</span>
[img]assets/img/cover.jpg" alt="Cover[/img]
</div>
</div>
..........................

</div>


相关的CSS:
#magazine{
width:800px;
height:400px;
}
#magazine .turn-page{
width:400px;
height:400px;
background-color:#ccc;
}

然后jquery中调用:
$(function(){

var mag = $('#magazine');

//调用插件的turn方法
mag.turn();

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(){

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

});

});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值