精华内容
下载资源
问答
  • 主要介绍了javaScript+turn.js实现图书翻页效果实例代码,重点讲解turn.js 如何使用的。需要的朋友可以参考下
  • javaScript+turn.js实现图书翻页效果

    万次阅读 2016-12-07 16:16:13
    为了实现图书翻页的效果 我们在网上可以看到很多教程 在这里 推荐turn.js 网上的turn.js 有api 不过是英文的 很多人看起来不方便 关于代码也是奇形怪状 在这里 我将详细讲解 如何使用turn.js实现翻页效果 本篇文章...

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

     

    首先附上个人的文件路径

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

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

     

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

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

    接下来  我们开始使将turn.js结合到我们自己的项目中  先附上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="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;
    
                }
    
                // 创建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>
    
    

     

     

     

     

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

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

        <link href="css/magazine.css" 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的最下方,这里极容易被忽视!!!切记路径不可错误,不然报错!!!!

            // 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 = $('<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文件夹,根据需要可更换。
    
        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 = $('<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');//这里指向大图路径,当点击预览大图的时候,加载该路径,可根据需要更换。
    }
    
    // 加载小图
    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

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

     

     

    展开全文
  • 关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果,本篇文章只是讲解 turn.js 如何使用!!!!!!! 文章最后提供源码下载,结合源码看本文,turn.js更简单!首先附上个人的文件路径对于css 和 ...

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

    首先附上个人的文件路径

    1856d9bbfe2b85a53e3ab53b3092f66b.png

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

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

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

    e5789af8362948bf4b439c827fcd6f53.png

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

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

    Using turn.js and the new zoom feature

    $(function () {

    var next_button = $(".next-button"); //初始化左右箭头

    var previous_button = $(".previous-button");

    setArrows();

    });

    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;

    }

    // 创建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;

    $('

    html('

    Press ESC to exit
    ').

    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

    });

    展开全文
  • turn.js实现图书翻页效果

    千次阅读 2018-04-03 17:46:52
    前台展示为翻书效果的页面,于是找到了turn.js插件。 插件目录结构如图 对于css 和 js文件不需要过多的解释 在这里要注意的是pages文件夹 这里个文件夹下放的是需要预览的图片文件 所以 我们想展示的资源...
    项目需求需要有个会刊的页面。前台展示为翻书效果的页面,于是找到了turn.js插件。
    插件目录结构如图

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

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

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

    文件名必须是数字的格式,而且后缀为jpg,否则不识别。


    再看html页面的引入流程


    jquery版本必须是1.7.3



    其中一个flip文件中有个magazine.js文件,里面有pages这个你要取的图片资源目录,需要替换,当然我们知道,php
    magazine.js
    展开全文
  • document.onselectstart = function() {return false;}var nI = 0;var kI = 0;var run = false;function setOpacity(obj, o) {if (o < 0) o = 0;else if (o > 100) o = 100;if (obj.filters) obj.filters.alph...

    document.onselectstart = function() {

    return false;

    }

    var nI = 0;

    var kI = 0;

    var run = false;

    function setOpacity(obj, o) {

    if (o < 0) o = 0;

    else if (o > 100) o = 100;

    if (obj.filters) obj.filters.alpha.opacity = o;

    else obj.style.opacity = o / 100;

    }

    function TPR__(p) {

    P1.style.left = 50 - (2.5 * p) + "%";

    P1.style.width = (2.5 * p) + "%";

    setOpacity(P1i, .5 * p * p);

    if (p == 20) run = false;

    }

    function TPR_(p) {

    P2.style.width = 50 - (2.5 * p) + "%";

    setOpacity(P2i, 100 - .5 * (p * p));

    if (p == 20) {

    P2i.src = IMGSRC[kI].src;

    setOpacity(P2i, 100);

    P2.style.width = "50%";

    for (var i = 1; i <= 20; i++) setTimeout("TPR__(" + i + ")", i * 32);

    }

    }

    function TPR() {

    if (!run) {

    run = true;

    P01i.src = IMGSRC[kI].src;

    P1.style.width = 0;

    kI++;

    if (kI >= nI) kI = 0;

    titLe(kI);

    P02i.src = IMGSRC[kI].src;

    P1i.src = IMGSRC[kI].src;

    for (var i = 1; i <= 20; i++) setTimeout("TPR_(" + i + ")", i * 32);

    } else setTimeout("TPR()", 100);

    }

    function TPL__(p) {

    P2.style.width = (2.5 * p) + "%";

    setOpacity(P2i, .5 * p * p);

    if (p == 20) run = false;

    }

    function TPL_(p) {

    P1.style.left = (2.5 * p) + "%";

    P1.style.width = 40 + (10 - 2.5 * p) + "%";

    setOpacity(P1i, 100 - .5 * (p * p));

    if (p == 20) {

    P1i.src = IMGSRC[kI].src;

    setOpacity(P1i, 100);

    P1.style.left = 0;

    P1.style.width = "50%";

    for (var i = 1; i <= 20; i++) setTimeout("TPL__(" + i + ")", i * 32);

    }

    }

    function TPL() {

    if (!run) {

    run = true;

    P02i.src = IMGSRC[kI].src;

    P2.style.width = 0;

    kI--;

    if (kI < 0) kI = nI - 1;

    titLe(kI);

    P01i.src = IMGSRC[kI].src;

    P2i.src = IMGSRC[kI].src;

    for (var i = 1; i <= 20; i++) setTimeout("TPL_(" + i + ")", i * 32);

    } else setTimeout("TPL()", 100);

    }

    function titLe(p) {

    document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;

    }

    onload = function() {

    IMGSRC = document.getElementById("imgsrc").getElementsByTagName("img");

    DB = document.getElementById("DHTMLBOOK");

    P01 = DB.getElementsByTagName("span")[0];

    P01i = P01.getElementsByTagName("img")[0];

    P02 = DB.getElementsByTagName("span")[1];

    P02i = P02.getElementsByTagName("img")[0];

    P1 = DB.getElementsByTagName("span")[2];

    P1i = P1.getElementsByTagName("img")[0];

    P2 = DB.getElementsByTagName("span")[3];

    P2i = P2.getElementsByTagName("img")[0];

    nI = IMGSRC.length;

    P1i.src = IMGSRC[kI].src;

    P2i.src = IMGSRC[kI].src;

    titLe(kI);

    DB.style.visibility = "visible";

    }

    展开全文
  • turn.js实现图书翻页

    热门讨论 2016-12-07 16:20:50
    使用turn.js实现图书的翻页预览效果
  • JS实现图片翻书效果-懒人图库#center {LEFT: 50%; POSITION: absolute; TOP: 50%}#DHTMLBOOK {BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px...
  • 小程序实现书籍翻页效果

    万次阅读 2019-06-12 18:26:04
    做的小程序中突然加了一个相册,要求相册可以点击实现翻页,web能实现这种翻页效果的插件有很多,如turn.js,类似这种插件基本都是基于jQuery的,但是小程序是不支持jQ的。参考了网上大佬的代码,实现了一个最简单的...
  • css3实现书本翻页效果

    万次阅读 2020-12-22 17:25:38
    css3翻页效果 关键要点: 1.css3 3d动画的掌握 2.如何解决翻转后页面内容的改变 3.如何保持书本一直处于居中位置 代码总览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-...
  • JS实现图片翻页效果

    2009-02-27 13:46:15
    JS在不改变原图的情况下呈现图片翻页的视觉效果
  • H5和turn.js实现电子书翻页效果

    千次阅读 2020-05-01 09:25:55
    电子书的翻页效果实现,需要用到H5的插件JS文件turn.js 首先看效果图: 展示一下文件目录 这个效果需要自己下载一个turn的JS文件,我是通过Git的地址clone下载下来的。 turn.js完整文件展示 然后再自己随便复制...
  • 当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的。在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 “mousewheel” 事件,而 Firefox ...
  • 本文给大家分享一段代码,基于js代码实现的翻书效果的页面切换样式,具体代码如下所示;$(function() {$("#right").click(function() {var roll = $("$(roll).animate({left: "10px",width: "398px"}, 1000, ...
  • 主要介绍了JS实现的3D拖拽翻页效果,通过鼠标事件结合时间函数动态操作页面元素实现拖拽翻页的效果,需要的朋友可以参考下
  • 这篇文章主要介绍了CSS3实现3D翻书效果,基于CSS3新属性Animation及transform实现类似翻书效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期...
  • 其项目需求是要实现书效果,看到这个需求后,我真是懵了,这咋整,我可是java出身的啊,这个问题真是难住我了,后来有同事的指导,之前他曾经做过PC版的翻书效果,当时使用的是Turn.js ,查过其相关API后,整个人...
  • 这篇文章主要介绍了javascript移动端 电子书 翻页效果实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果 1、后端给一长串的纯文本 2、前端根据屏幕...
  • HTML5 实现的图书翻页效果(附源码),解压密码www.0html.com,仅供学习参考。
  • 这个是采用html\css\javascript在浏览器中实现图书的翻页效果,同时用户可以进行语言转换,比如可以用来改编适应在vue中。笔者进行改编之后也将其放置在了压缩包中,仅供大家参考学习!
  • js翻页效果实现

    万次阅读 2017-10-24 13:31:48
    1)功能:实现书籍翻页效果 2)使用插件:turn.js2、示例 1)前提工作 – 需要提前计算数据总页数,提前生成需要的页数 – 初始化翻插件 2)实践 html代码片段示例:<!DOCTYPE html> 翻</title>
  • cocos2d - JS 实现翻页效果

    千次阅读 2017-01-17 15:38:11
    cocos2d - JS 实现翻页效果 :显示效果 :说明 :Demo实现了常见的翻页效果 , 还有点击选关模式的放大效果 . 翻页效果主层 JavaScript 代码 :var SelectPageLayer = cc.Layer.extend({ deltaCount : null, ...
  • js实现书效果

    2017-05-08 09:53:07
    js实现书效果
  • 之前由于种种琐事,暂停了这个翻页效果实现,终于在这周末完成了大部分功能,但是这里只是给出了一个基本的雏形,没有添加翻页的动画效果,由于下个周末开始,需要转向去研究framework层(短暂的酱油期就这样结束...
  • Turn.js 书本翻页效果

    千次阅读 2014-02-27 09:45:09
      Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志...Turn.js 支持硬件加速来让翻页效果更加平滑。 可通过 API 来获取当前显示的页号,并提供选项来定制默认页号、加速器、阴影和延时。
  • 解决此问题 剩下的就是用js添加点击事件,控制元素样式实现翻页动画 到此这篇关于css3实现书本翻页效果的示例代码的文章就介绍到这了,更多相关css3 书本翻页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,...
  • 本代码是实现小程序的左右滑动,点击翻效果,改改在H5也可以用。 效果图: 实现代码: <image class="item_0" src="{{imageList[turnPage]}}" catchtouchstart='touchStart' catchtouchend="touchEnd...
  • 偶然发现了个好东西:mock.js,它可以用来随机的生成你想要的数据格式,包括文本、图片等,这时候我们再结合node.js,就可以真正的脱离后端,自己做接口,返回数据,测试我们的前端功能模块了。 mock.js的大致使用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,932
精华内容 1,172
关键字:

js实现书翻页的效果