javaScript+turn.js实现图书翻页效果

为了实现图书翻页的效果   我们在网上可以看到很多教程     在这里   推荐turn.js     网上的turn.js 有api  不过是英文的  很多人看起来不方便   关于代码也是奇形怪状   在这里   我将详细讲解   如何使用turn.js实现翻页效果  本篇文章只是讲解 turn.js 如何使用！！！！！！！ 文章最后提供源码下载，结合源码看本文，turn.js更简单！

 

首先附上个人的文件路径

对于css   和 js文件不需要过多的解释   在这里要注意的是pages文件夹   这里个文件夹下放的是需要预览的图片文件    所以

我们想展示的资源  就放在这个目录下面！！！！！！   

 

 接下来  先给大家看一下pages下面的资源名称

可以看到  所有的资源都以数字命名  至于为什么  我们在之后会讲解

接下来  我们开始使将turn.js结合到我们自己的项目中  先附上index.html中的代码

 

 

 

 

 

 

一：在其中值得注意的是：对于js的引用   有两处！  

1：是开头这里引用了css和js

 

 

 

2：则是index.html的最下方，这里极容易被忽视！！！切记路径不可错误，不然报错！！！！

        // 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   这个js值整个功能实现的支柱   在这里提供了所有的函数。

 

/*
 * Magazine sample
*/

//这里是对前页后页的位置设定

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 = $('
', {});

    // 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('
');

        // Load the page
        loadPage(page, element);
    }

}

function loadPage(page, pageElement) {

    // Create an image element
    var 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文件夹，根据需要可更换。

    loadRegions(page, pageElement);

}

// 这里是识别预览大图还是小图的模式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 = $('
', {
        '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.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');//这里指向大图路径，当点击预览大图的时候，加载该路径，可根据需要更换。
}

// 加载小图
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();
}

// 为图书设置宽高
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');

}

//这里用于返回待预览资源的个数（即书本的页数）
function numberOfViews(book) {
    return book.turn('pages') / 2 + 1;
}

// 当前页
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

最后   展示一下实现的效果，很流畅！！！！

 

附上源码地址：

http://download.csdn.net/download/zlaks123456/9704622

觉得好，希望支持一下，支付宝扫个码，您还有红包领，何乐而不为呢？哈哈！