代码改变世界

Turn.js 实现翻页效果

2012-08-05 19:07  hoho_luo  阅读(1509)  评论(0)  编辑  收藏  举报
Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果，支持触摸屏设备。
Turn.js 支持硬件加速来让翻页效果更加平滑。
 
View Code 
<html>
<head>
    <title>Turn</title>
    <script src="http://www.cnblogs.com/jquery-easyui-1.2.6/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/Turn/turn.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#magazine').turn({ gradients: true, acceleration: true });
        });
   
</script>

<style type="text/css">
#magazine{
    width: 800px;
    height: 400px;
}
#magazine .turn-page{
    background-color:#ccc;
    border:1px solid Red;
}
</style>
</head>
<body>
<div id='magazine'>
    <div> Page 1 </div>
    <div> Page 2 </div>
    <div> Page 3 </div>
    <div> Page 4</div>
    <div> Page 5 </div>
    <div> Page 6 </div>
</div>
</body>
</html>

 

 

效果如下: