您的位置：首页 > Web前端 > JavaScript

js翻页效果实现

2017-10-24 13:31 429 查看

1、说明

1）功能：实现书籍翻页效果

2）使用插件：turn.js

2、示例

1）前提工作

– 需要提前计算数据总页数，提前生成需要的页数

– 初始化翻书插件

2）实践

html代码片段示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻书</title>
<meta name="description" content="翻书">
<meta name="keywords" content="翻书">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<!--  <link rel="stylesheet" href="common.css"> -->
<style>
.btn {
background: none;
border: none;
line-height: normal;
cursor: pointer;
outline: none;
font-family: "Microsoft Yahei"; }
#magazine .turn-page{
background-color:#ccc;
background-size:100% 100%;
}
main{
overflow: hidden;
background: url("img/bg2.png") no-repeat;
-webkit-justify-content: space-between;
background-size: cover;
}
.pagination {
display: -webkit-flex;
-webkit-justify-content: space-between;
-webkit-align-items: center;
margin-top: 5%;
padding: 0 5%; }
.pagination .btn {
padding: 5px 10px;
color:#000;
font-size: 14px; }
</style>
</head>
<body>
<div class="book">
<div class="main">
<div id="magazine">
<div style="background-image:url(img/book3.png);">
<p style="font-size:30px;margin: 150px;">首页</p>
</div>

</div>
</div>
<div class="pagination" id="pagebut">
<button class="btn prev" style="visibility:hidden">上一页</button>
<button class="btn next">下一页</button>
</div>
<div class="pagination" id="gobackbtn" style="display: none;">

</div>
</div>
<input type="hidden" value="7" id="page_nums" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/turn.min.js"></script>
<script src="js/js.js"></script>
</body>
</html>

js代码片段

$(function(){
//------------- 翻书init start ------------
//  book 初始化
$('#magazine').turn({
pages: $('#page_nums').val(),//总页数
display: 'single',
acceleration: true,
gradients: !$.isTouch,
width:  $(window).width()*0.9,
height: $(window).height()*0.834,
elevation:50,/*
turnCorners: "bl,br",*/
when: {
turning: function(e, page, view) {
$("#magazine").turn("disable");
// Gets the range of pages that the book needs right now
var range = $(this).turn('range', page);
// Check if each page is within the book
for (page = range[0]; page<=range[1]; page++)
addPage(page, $(this));
},
turned: function(e, page) {
$('#page-number').val(page);
if(page==1){
$('.prev').css('visibility','hidden');
}
if(page >= 2){
var page = $("#magazine").turn('page');
//显示 上一页按钮显示
$('.prev').css('visibility','visible');
$('.next').css('visibility','visible');
}
if(page == $("#magazine").turn('pages')-1){
//最后一页 下一页按钮消失
$('.next').css('visibility','hidden');
}
}
}
});

//  上下翻页
$('.next').on("click",function () {
$('#magazine').turn("next");
var page = $("#magazine").turn('page');
if(page == 2){
//显示 上一页按钮显示
$('.prev').css('visibility','visible')
} else if(page == $("#magazine").turn('pages')-1){
//最后一页 下一页按钮消失
$('.next').css('visibility','hidden')
}
});
$('.prev').on("click",function () {
$('#magazine').turn("previous");
var page = $("#magazine").turn('page');
if(page == 1){
//首页上一页 按钮消失
$('.prev').css('visibility','hidden')
} else if(page == $("#magazine").turn('pages')-2){
//倒数第二页 显示 下一页 按钮
$('.next').css('visibility','visible')
}
});
//------------- 翻书init end --------------
});

// Adds the pages that the book will need
function addPage(page, book)
{
var pages =$('#page_nums').val();//总页数
//  First check if the page is already in the book
if (!book.turn('hasPage', page)) {
// Create an element for this page
var element = $('<div />', {'class': 'page '+((page%2==0) ? 'odd' : 'even'), 'id': 'page-'+page}).html('<i class="loader"></i>');
// If not then add the page
book.turn('addPage', element, page);
// Let's assum that the data is comming from the server and the request takes 1s.
setTimeout(function(){
var sHtml = '<div class="data" style="margin:100px;"><p>Data for page '+page+'</p><a href="javascript:void(0)" onclick="showDetail()">点击进入详情页</a></div>';
element.html(sHtml);
}, 1000);
}
}

//detail page
function showDetail()
{
//详情页数据
var sHtml = '<div class="data" style="margin:80px;">welcome to detail page *^_^* </div>';
//获取 当前页 页码
var currentPage = $("#magazine").turn('page');
//获取 最后一页 页码，作为详情页
var iDetailIndex = $("#magazine").turn('pages');
iDetailIndex = parseInt(iDetailIndex);
//分类标签按钮展示处理
$('#pagebut').hide();
$("#gobackbtn").html('<button class="btn"></button><button class="btn" onclick="gobacklist(' + currentPage + ');">返回</button>');
$('#gobackbtn').show();
//新增并跳转到详情页
$('#magazine').turn("addPage", sHtml, iDetailIndex);
$('#magazine').turn("page", iDetailIndex);
}

//详情页返回列表页
function gobacklist(listPage)
{
//返回list
$('#magazine').turn('page', listPage);
//处理按钮展示
if ($('#pagebut').css('display', 'none')) {
$("#gobackbtn").html('');
$('#gobackbtn').hide();
$('#pagebut').show();
}
}

3、效果

最终效果如图

注：

1）jquery插件库：http://www.jq22.com/

2）使用插件（turn.js）官网说明：http://www.turnjs.com/docs/Main_Page

3）插件示例代码：http://www.jq22.com/jquery-info2534

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 插件 javascript

相关文章推荐

新的分享

章节导航