javaScript+turn.js實(shí)現(xiàn)圖書翻頁效果實(shí)例代碼
更新時(shí)間：2017年02月16日 10:04:45 作者：zwh-android&&java
這篇文章主要介紹了javaScript+turn.js實(shí)現(xiàn)圖書翻頁效果實(shí)例代碼,重點(diǎn)講解turn.js 如何使用的。需要的朋友可以參考下
為了實(shí)現(xiàn)圖書翻頁的效果我們?cè)诰W(wǎng)上可以看到很多教程 在這里推薦turn.js 網(wǎng)上的turn.js 有api 不過是英文的 很多人看起來不方便 .關(guān)于代碼也是奇形怪狀在這里我將詳細(xì)講解如何使用turn.js實(shí)現(xiàn)翻頁效果 ,本篇文章只是講解 turn.js 如何使用！?。。。。?！ 文章最后提供源碼下載，結(jié)合源碼看本文，turn.js更簡(jiǎn)單！
首先附上個(gè)人的文件路徑
對(duì)于css 和 js文件不需要過多的解釋 在這里要注意的是pages文件夾 這里個(gè)文件夾下放的是需要預(yù)覽的圖片文件 所以
我們想展示的資源 就放在這個(gè)目錄下面?。。。。?！
接下來 先給大家看一下pages下面的資源名稱
可以看到 所有的資源都以數(shù)字命名 至于為什么 我們?cè)谥髸?huì)講解
接下來 我們開始使將turn.js結(jié)合到我們自己的項(xiàng)目中 先附上index.html中的代碼
<!doctype html><!--[if lt IE 7 ]>
<html lang="en" class="ie6">
<![endif]--><!--[if IE 7 ]>
<html lang="en" class="ie7">
<![endif]--><!--[if IE 8 ]>
<html lang="en" class="ie8">
<![endif]--><!--[if IE 9 ]>
<html lang="en" class="ie9">
<![endif]--><!--[if !IE]>
<!-->
<html lang="en">
<!--<![endif]-->
<head>
<title>Using turn.js and the new zoom feature</title>
<meta name="viewport" content="width = 1050, user-scalable = no"/>
<link href="css/magazine.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.1.7.js"></script>
<script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>
<script type="text/javascript" src="js/hash.js"></script>
<script type="text/javascript" src="js/turn.js"></script>
<script type="text/javascript" src="js/turn.html4.min.js"></script>
<script type="text/javascript" src="js/zoom.min.js"></script>
<script type="text/javascript" src="js/magazine.js"></script>
<script>
$(function () {
var next_button = $(".next-button"); //初始化左右箭頭
var previous_button = $(".previous-button");
setArrows();
});
</script>
</head>
<body>
<div id="canvas">
<!-- 右上角放大縮小按鈕 -->
<div class="zoom-icon zoom-icon-in">
</div>
<div class="magazine-viewport">
<div class="container">
<div class="magazine">
<!-- Next button --></div>
</div>
<div ignore="1" class="next-button">
</div>
<!-- Previous button -->
<div ignore="1" class="previous-button">
</div>
</div>
<script type="text/javascript">
function loadApp() {
$('#canvas').fadeIn(1000);
var flipbook = $('.magazine');
// Check if the CSS was already loaded
if (flipbook.width() == 0 || flipbook.height() == 0) {
setTimeout(loadApp, 10);
return;
}
// 創(chuàng)建flipbook
flipbook.turn({
width: 1200,
height: 781,
duration: 1000, //翻頁速度，值越小越快
// Hardware acceleration
acceleration: !isChrome(),
// Enables gradients
gradients: true,
// Auto center this flipbook
autoCenter: true,
// Elevation from the edge of the flipbook when turning a page
elevation: 50,
// The number of pages
pages: 8,
// Events
when: {
turning: function (event, page, view) {
var book = $(this),
currentPage = book.turn('page'),
pages = book.turn('pages');
// Update the current URI
Hash.go('page/' + page).update();
// Show and hide navigation buttons
disableControls(page);
},
turned: function (event, page, view) {
disableControls(page);
$(this).turn('center');
if (page == 1) {
$(this).turn('peel', 'br');
}
},
missing: function (event, pages) {
// Add pages that aren't in the magazine
for (var i = 0; i < pages.length; i++)
addPage(pages[i], $(this));
}
}
});
// Zoom.js
$('.magazine-viewport').zoom({
flipbook: $('.magazine'),
max: function () {
return largeMagazineWidth() / $('.magazine').width();
},
when: {
swipeLeft: function () {
$(this).zoom('flipbook').turn('next');
},
swipeRight: function () {
$(this).zoom('flipbook').turn('previous');
},
resize: function (event, scale, page, pageElement) {
if (scale == 1)
loadSmallPage(page, pageElement);
else
loadLargePage(page, pageElement);
},
zoomIn: function () {
$('.made').hide();
$('.magazine').removeClass('animated').addClass('zoom-in');
$('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
if (!window.escTip && !$.isTouch) {
escTip = true;
$('<div />', {'class': 'exit-message'}).
html('<div>Press ESC to exit</div>').
appendTo($('body')).
delay(2000).
animate({opacity: 0}, 500, function () {
$(this).remove();
});
}
},
zoomOut: function () {
$('.exit-message').hide();
$('.thumbnails').fadeIn();
$('.made').fadeIn();
$('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
setTimeout(function () {
$('.magazine').addClass('animated').removeClass('zoom-in');
resizeViewport();
}, 0);
}
}
});
// Zoom event
if ($.isTouch)
$('.magazine-viewport').bind('zoom.doubleTap', zoomTo);
else
$('.magazine-viewport').bind('zoom.tap', zoomTo);
// Using arrow keys to turn the page
$(document).keydown(function (e) {
var previous = 37, next = 39, esc = 27;
switch (e.keyCode) {
case previous:
// left arrow
$('.magazine').turn('previous');
e.preventDefault();
break;
case next:
//right arrow
$('.magazine').turn('next');
e.preventDefault();
break;
case esc:
$('.magazine-viewport').zoom('zoomOut');
e.preventDefault();
break;
}
});
// URIs - Format #/page/1
Hash.on('^page\/([0-9]*)$', {
yep: function (path, parts) {
var page = parts[1];
if (page !== undefined) {
if ($('.magazine').turn('is'))
$('.magazine').turn('page', page);
}
},
nop: function (path) {
if ($('.magazine').turn('is'))
$('.magazine').turn('page', 1);
}
});
$(window).resize(function () {
resizeViewport();
}).bind('orientationchange', function () {
resizeViewport();
});
// Events for thumbnails
$('.thumbnails').click(function (event) {
var page;
if (event.target && (page = /page-([0-9]+)/.exec($(event.target).attr('class')))) {
$('.magazine').turn('page', page[1]);
}
});
$('.thumbnails li').
bind($.mouseEvents.over, function () {
$(this).addClass('thumb-hover');
}).bind($.mouseEvents.out, function () {
$(this).removeClass('thumb-hover');
});
if ($.isTouch) {
$('.thumbnails').
addClass('thumbanils-touch').
bind($.mouseEvents.move, function (event) {
event.preventDefault();
});
} else {
$('.thumbnails ul').mouseover(function () {
$('.thumbnails').addClass('thumbnails-hover');
}).mousedown(function () {
return false;
}).mouseout(function () {
$('.thumbnails').removeClass('thumbnails-hover');
});
}
// Regions
if ($.isTouch) {
$('.magazine').bind('touchstart', regionClick);
} else {
$('.magazine').click(regionClick);
}
// Events for the next button
$('.next-button').bind($.mouseEvents.over, function () {
$(this).addClass('next-button-hover');
}).bind($.mouseEvents.out, function () {
$(this).removeClass('next-button-hover');
}).bind($.mouseEvents.down, function () {
$(this).addClass('next-button-down');
}).bind($.mouseEvents.up, function () {
$(this).removeClass('next-button-down');
}).click(function () {
$('.magazine').turn('next');
setTimeout(function () {
setArrows();
}, 300);
});
// Events for the next button
$('.previous-button').bind($.mouseEvents.over, function () {
$(this).addClass('previous-button-hover');
}).bind($.mouseEvents.out, function () {
$(this).removeClass('previous-button-hover');
}).bind($.mouseEvents.down, function () {
$(this).addClass('previous-button-down');
}).bind($.mouseEvents.up, function () {
$(this).removeClass('previous-button-down');
}).click(function () {
$('.magazine').turn('previous');
setTimeout(function () {
setArrows();
}, 300);
});
resizeViewport();
$('.magazine').addClass('animated');
}
// Zoom icon
$('.zoom-icon').bind('mouseover', function () {
if ($(this).hasClass('zoom-icon-in'))
$(this).addClass('zoom-icon-in-hover');
if ($(this).hasClass('zoom-icon-out'))
$(this).addClass('zoom-icon-out-hover');
}).bind('mouseout', function () {
if ($(this).hasClass('zoom-icon-in'))
$(this).removeClass('zoom-icon-in-hover');
if ($(this).hasClass('zoom-icon-out'))
$(this).removeClass('zoom-icon-out-hover');
}).bind('click', function () {
if ($(this).hasClass('zoom-icon-in'))
$('.magazine-viewport').zoom('zoomIn');
else if ($(this).hasClass('zoom-icon-out'))
$('.magazine-viewport').zoom('zoomOut');
});
$('#canvas').hide();
// Load the HTML4 version if there's not CSS transform
yepnope({
test: Modernizr.csstransforms,
yep: ['js/turn.js'],
nope: ['js/turn.html4.min.js'],
both: ['js/zoom.min.js', 'js/magazine.js', 'css/magazine.css'],
complete: loadApp
});
</script>
</div>
</body>
</html>
<![endif]--></div>
</html>
</html>
</html>
</html>
一：在其中值得注意的是：對(duì)于js的引用 有兩處！
1：是開頭這里引用了css和js
<link href="css/magazine.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery.min.1.7.js"></script> <script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script> <script type="text/javascript" src="js/hash.js"></script> <script type="text/javascript" src="js/turn.js"></script> <script type="text/javascript" src="js/turn.html4.min.js"></script> <script type="text/javascript" src="js/zoom.min.js"></script> <script type="text/javascript" src="js/magazine.js"></script>
2：則是index.html的最下方，這里極容易被忽視?。?！切記路徑不可錯(cuò)誤，不然報(bào)錯(cuò)?。。。?/strong>
// Load the HTML4 version if there's not CSS transform
yepnope({
test: Modernizr.csstransforms,
yep: ['js/turn.js'],
nope: ['js/turn.html4.min.js'],
both: ['js/zoom.min.js', 'js/magazine.js', 'css/magazine.css'],
complete: loadApp
});
二：js中的magazine.js 這個(gè)js值整個(gè)功能實(shí)現(xiàn)的支柱 在這里提供了所有的函數(shù)。
/*
* Magazine sample
*/
//這里是對(duì)前頁后頁的位置設(shè)定
function setArrows() {
/*var width = $(window).width();
//alert("chushihua"+width);
var height = $(window).height();
var bookWidth = $(".magazine").width();
var bookHeight = $(".magazine").height();
//alert("chushihua"+bookWidth);
var arrowSize = $(".next-button").width();
//alert(arrowSize);
alert($(".magazine").offset().left+"\n"+$('.next-button').offset().left);
var LeftArrowLeft = - ( width - bookWidth ) / 4 + 'px' ;
//alert(LeftArrowLeft);
var RightArrowLeft = - ( width - bookWidth+ arrowSize*2) / 4 + 'px' ;
//alert(RightArrowLeft);
//alert(RightArrowLeft);
//alert("zhihou"+bookWidth);
$('.next-button').css( "right",RightArrowLeft );
$('.previous-button').css( "left", LeftArrowLeft );*/
setTimeout(function(){
var width = $(window).width();
var bookWidth = $(".magazine").width();
var arrowSize = $(".next-button").width();
var magaLeft=$(".magazine").offset().left;
var nextLeft= (width-bookWidth-magaLeft-60)/2;
//alert("width "+width +"\nbookWidth :"+bookWidth +"\nmagaLeft:"+magaLeft+"\nnextLeft:"+nextLeft);
$('.next-button').animate({ "right":nextLeft},300);
$('.previous-button').animate({ "left":nextLeft},300);
},100);
}
//這是用于加載所有的待展示資源
function addPage(page, book) {
var id, pages = book.turn('pages');
// Create a new element for this page
var element = $('<div />', {});
// Add the page to the flipbook
if (book.turn('addPage', element, page)) {
// Add the initial HTML
// It will contain a loader indicator and a gradient
element.html('<div class="gradient"></div><div class="loader"></div>');
// Load the page
loadPage(page, element);
}
}
function loadPage(page, pageElement) {
// Create an image element
var img = $('<img />');
img.mousedown(function(e) {
e.preventDefault();
});
img.load(function() {
// Set the size
$(this).css({
width: '100%',
height: '100%'
});
// Add the image to the page after loaded
$(this).appendTo(pageElement);
// Remove the loader indicator
pageElement.find('.loader').remove();
});
// Load the page
img.attr('src', 'pages/' + page + '.png');//這里就是指向展示資源路徑，pages/即之前提及的pages文件夾，根據(jù)需要可更換。
loadRegions(page, pageElement);
}
// 這里是識(shí)別預(yù)覽大圖還是小圖的模式1為大圖
function zoomTo(event) {
setTimeout(function() {
if ($('.magazine-viewport').data().regionClicked) {
$('.magazine-viewport').data().regionClicked = false;
} else {
if ($('.magazine-viewport').zoom('value') == 1) {
$('.magazine-viewport').zoom('zoomIn', event);
} else {
$('.magazine-viewport').zoom('zoomOut');
}
}
},
1);
}
// 不需了解
function loadRegions(page, element) {
$.getJSON('pages/' + page + '-regions.json').done(function(data) {
$.each(data,
function(key, region) {
addRegion(region, element);
});
});
}
// 不需了解
function addRegion(region, pageElement) {
var reg = $('<div />', {
'class': 'region ' + region['class']
}),
options = $('.magazine').turn('options'),
pageWidth = options.width / 2,
pageHeight = options.height;
reg.css({
top: Math.round(region.y / pageHeight * 100) + '%',
left: Math.round(region.x / pageWidth * 100) + '%',
width: Math.round(region.width / pageWidth * 100) + '%',
height: Math.round(region.height / pageHeight * 100) + '%'
}).attr('region-data', $.param(region.data || ''));
reg.appendTo(pageElement);
}
function regionClick(event) {
var region = $(event.target);
if (region.hasClass('region')) {
$('.magazine-viewport').data().regionClicked = true;
setTimeout(function() {
$('.magazine-viewport').data().regionClicked = false;
},
100);
var regionType = $.trim(region.attr('class').replace('region', ''));
return processRegion(region, regionType);
}
}
// 不需了解
function processRegion(region, regionType) {
data = decodeParams(region.attr('region-data'));
switch (regionType) {
case 'link':
window.open(data.url);
break;
case 'zoom':
var regionOffset = region.offset(),
viewportOffset = $('.magazine-viewport').offset(),
pos = {
x: regionOffset.left - viewportOffset.left,
y: regionOffset.top - viewportOffset.top
};
$('.magazine-viewport').zoom('zoomIn', pos);
break;
case 'to-page':
$('.magazine').turn('page', data.page);
break;
}
}
// 加載大圖
function loadLargePage(page, pageElement) {
var img = $('<img />');
img.load(function() {
var prevImg = pageElement.find('img');
$(this).css({
width: '100%',
height: '100%'
});
$(this).appendTo(pageElement);
prevImg.remove();
});
// Loadnew page
img.attr('src', 'pages/' + page + '-large.png');//這里指向大圖路徑，當(dāng)點(diǎn)擊預(yù)覽大圖的時(shí)候，加載該路徑，可根據(jù)需要更換。
}
// 加載小圖
function loadSmallPage(page, pageElement) {
var img = pageElement.find('img');
img.css({
width: '100%',
height: '100%'
});
img.unbind('load');
// Loadnew page
img.attr('src', 'pages/' + page + '.png');//指向小圖路徑，同上
}
// 判斷瀏覽器
function isChrome() {
return navigator.userAgent.indexOf('Chrome') != -1;
}
function disableControls(page) {
if (page == 1) $('.previous-button').hide();
else $('.previous-button').show();
if (page == $('.magazine').turn('pages')) $('.next-button').hide();
else $('.next-button').show();
}
// 為圖書設(shè)置寬高
function resizeViewport() {
var width = $(window).width(),
height = $(window).height(),
options = $('.magazine').turn('options');
$('.magazine').removeClass('animated');
$('.magazine-viewport').css({
width: width,
height: height
}).zoom('resize');
setArrows() ;
if ($('.magazine').turn('zoom') == 1) {
var bound = calculateBound({
width: options.width,
height: options.height,
boundWidth: Math.min(options.width, width),
boundHeight: Math.min(options.height, height)
});
if (bound.width % 2 !== 0) bound.width -= 1;
if (bound.width != $('.magazine').width() || bound.height != $('.magazine').height()) {
$('.magazine').turn('size', bound.width, bound.height);
if ($('.magazine').turn('page') == 1) $('.magazine').turn('peel', 'br');
}
$('.magazine').css({
top: -bound.height / 2,
left: -bound.width / 2
});
}
var magazineOffset = $('.magazine').offset(),
boundH = height - magazineOffset.top - $('.magazine').height(),
marginTop = (boundH - $('.thumbnails > div').height()) / 2;
if (marginTop < 0) {
$('.thumbnails').css({
height: 1
});
} else {
$('.thumbnails').css({
height: boundH
});
$('.thumbnails > div').css({
marginTop: marginTop
});
}
if (magazineOffset.top < $('.made').height()) $('.made').hide();
else $('.made').show();
$('.magazine').addClass('animated');
}
//這里用于返回待預(yù)覽資源的個(gè)數(shù)（即書本的頁數(shù)）
function numberOfViews(book) {
return book.turn('pages') / 2 + 1;
}
// 當(dāng)前頁
function getViewNumber(book, page) {
return parseInt((page || book.turn('page')) / 2 + 1, 10);
}
// 記錄寬度
function largeMagazineWidth() {
return 2214;
}
function decodeParams(data) {
var parts = data.split('&'),
d,
obj = {};
for (var i = 0; i < parts.length; i++) {
d = parts[i].split('=');
obj[decodeURIComponent(d[0])] = decodeURIComponent(d[1]);
}
return obj;
}
function calculateBound(d) {
var bound = {
width: d.width,
height: d.height
};
if (bound.width > d.boundWidth || bound.height > d.boundHeight) {
var rel = bound.width / bound.height;
if (d.boundWidth / rel > d.boundHeight && d.boundHeight * rel <= d.boundWidth) {
bound.width = Math.round(d.boundHeight * rel);
bound.height = d.boundHeight;
} else {
bound.width = d.boundWidth;
bound.height = Math.round(d.boundWidth / rel);
}
}
return bound;
}
在掌握到這些后 便可使用turn.js
最后 展示一下實(shí)現(xiàn)的效果，很流暢?。。?！
附上源碼地址：
以上所述是小編給大家介紹的javaScript+turn.js實(shí)現(xiàn)圖書翻頁效果實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- react.js 翻頁插件實(shí)例代碼
- 移動(dòng)端翻頁插件dropload.js（支持Zepto和jQuery）
- Js實(shí)現(xiàn)網(wǎng)頁鍵盤控制翻頁的方法
- jsp 使用jstl實(shí)現(xiàn)翻頁實(shí)例代碼
- Javascript表格翻頁效果的具體實(shí)現(xiàn)
- Javascript表格翻頁效果實(shí)現(xiàn)思路及代碼
- js實(shí)現(xiàn)翻頁后保持checkbox選中狀態(tài)的實(shí)現(xiàn)方法
- JavaScript 拖拽翻頁效果代碼
- javascript 翻頁測(cè)試頁(動(dòng)態(tài)創(chuàng)建標(biāo)簽并自動(dòng)翻頁)
- 按鍵盤方向鍵翻頁跳轉(zhuǎn)的javascript代碼(支持ie,firefox)
- JavaScript實(shí)現(xiàn)翻頁功能(附效果圖)
相關(guān)文章
這篇文章主要介紹了JS 數(shù)組和對(duì)象的深拷貝操作,結(jié)合實(shí)例形式分析了JS 數(shù)組和對(duì)象的深拷貝基本原理與操作技巧,需要的朋友可以參考下2020-06-06
一文詳解如何通過JavaScript動(dòng)態(tài)修改元素的樣式
這篇文章主要介紹了如何通過JavaScript動(dòng)態(tài)修改元素的樣式,三種方式分別是直接操作元素的style屬性、通過classList屬性添加或移除類名、以及使用CSSStyleDeclaration對(duì)象的setProperty方法,每種方法都有其適用場(chǎng)景,需要的朋友可以參考下2024-12-12
詳解JavaScript中js對(duì)象與JSON格式字符串的相互轉(zhuǎn)換
本篇文章主要介紹了JavaScript中js對(duì)象與JSON格式字符串的相互轉(zhuǎn)換，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-02-02
xtree.js 代碼...2007-03-03
理解JavaScript設(shè)計(jì)模式中的單例模式
這篇文章主要介紹了理解JavaScript設(shè)計(jì)模式中的單例模式，單例模式即Singleton?Pattern是最簡(jiǎn)單的設(shè)計(jì)模式之一，下文更多相關(guān)介紹感興趣的小伙伴可以參考一下2022-04-04
Javascript的表單驗(yàn)證-初識(shí)正則表達(dá)式
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。接下來通過本文給大家介紹Javascript的表單驗(yàn)證-初識(shí)正則表達(dá)式，對(duì)js表單驗(yàn)證正則表達(dá)式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-03-03
javascript實(shí)現(xiàn)簡(jiǎn)單的頁面右下角提示信息框
本文給大家分享的是使用javascript實(shí)現(xiàn)簡(jiǎn)單的頁面右下角提示信息框的方法和示例代碼，有需要的小伙伴可以參考下。2015-07-07
JS根據(jù)獎(jiǎng)品權(quán)重計(jì)算中獎(jiǎng)概率
這篇文章主要介紹了JS計(jì)算中獎(jiǎng)概率實(shí)現(xiàn)抽獎(jiǎng)的方法，對(duì)算法感興趣的同學(xué)，可以參考下2021-05-05
JavaScript代碼判斷輸入的字符串是否含有特殊字符和表情代碼實(shí)例
這篇文章主要介紹了JavaScript代碼判斷輸入的字符串是否含有特殊字符和表情，通過js代碼if語句進(jìn)行判斷，并結(jié)合自己開發(fā)的情景，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
使用js實(shí)現(xiàn)將后臺(tái)傳入的json數(shù)據(jù)放在前臺(tái)顯示
今天小編就為大家分享一篇使用js實(shí)現(xiàn)將后臺(tái)傳入的json數(shù)據(jù)放在前臺(tái)顯示，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08