<效果很炫的jQuery轻量级的书本和杂志翻页效果插件Turn.js，支持移动触摸屏设备，采用硬件加速看起来更自然平滑，带有强大的选项配置功能以及两种切换效果，支持Ajax数据加载，浏览器支持：Safari 5、Chrome 16、Firefox 10、IE 10, 9, 8，基于jQuery 1.7及以上，还是很不错的，值得使用
使用方法：
1.加载jQuer和插件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/turn.min.js"></script>
<style type="text/css">
body{
background:#ccc;
}
#magazine{
width:1152px;
height:752px;
}
#magazine .turn-page{
background-color:#ccc;
background-size:100% 100%;
}
</style>
|
2.HTML内容
1
2
3
4
5
6
7
8
| <div id="magazine">
<div style="background-image:url(pages/01.jpg);"></div>
<div style="background-image:url(pages/02.jpg);"></div>
<div style="background-image:url(pages/03.jpg);"></div>
<div style="background-image:url(pages/04.jpg);"></div>
<div style="background-image:url(pages/05.jpg);"></div>
<div style="background-image:url(pages/06.jpg);"></div>
</div>
|
3.函数调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <script type="text/javascript">
$(window).ready(function() {
$('#magazine').turn({
display: 'double',
acceleration: true,
gradients: !$.isTouch,
elevation:50,
when: {
turned: function(e, page) {
}
}
});
});
$(window).bind('keydown', function(e){
if (e.keyCode==37)
$('#magazine').turn('previous');
else if (e.keyCode==39)
$('#magazine').turn('next');
});
</script>
|
查看演示
官方下载
官方网站