精华内容
下载资源
问答
  • js实现翻页效果

    千次阅读 2014-03-10 20:21:47
    js实现翻页效果 转自:http://blog.csdn.net/redeagle_gbf/article/details/20044199 分页 @charset "utf-8"; * {margin:0px;padding:0px;border:0px;list-style-type:none;font-size:12

    js实现翻页效果

    转自:http://blog.csdn.net/redeagle_gbf/article/details/20044199

    <html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">  
        <title>分页</title>  
        <style>  
        @charset "utf-8";  
        * {margin:0px;padding:0px;border:0px;list-style-type:none;font-size:12px;font-family:arial, "Microsoft Yahei", "宋体";}  
        .pages {text-align:center;width:100%;margin:20px auto;padding-top:20px;height:26px;overflow:hidden;}  
        .pages a {padding:5px;border:1px solid #CCC;margin:0px 5px;text-decoration:none;color:#333;}  
        .pages a:hover {border:1px solid #FC0;color:#F60;}  
        .pages .this {border:1px solid #FC0;color:#F60;}  
        </style>  
          
        <script type="text/javascript" src="jquery-1.6.4.js"></script>
        <script type="text/javascript">     
        pageShow(1,11);  
        //dbPage     当前页  
        //totalPages 总页数  
        function pageShow(dbPage,totalPages)   
        {  
            $(function()   
            {  
                //page分割数量  
                var pageFor = 11;  
                var pageSlipt = parseInt(pageFor / 2);  
                var pageHTML = new Array;  
                if (dbPage > 1) //如果当前页大于1,则显示上一页  
                {     
                    var dbPagePre = dbPage-1;  
                    pageHTML += "<a href=\"javascript:pageShow('"+ (dbPagePre) +"','"+totalPages+"');\"><上一页</a>";  
                }  
                  
                if (totalPages > pageFor)    //如果总页数大于分割页数  
                {                     
                    if(dbPage <= pageSlipt+1)  
                    {  
                        for (i=1;i<=pageFor;i++)   
                        {  
                        if (i == dbPage)   
                        {  
                            pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\" class=\"this\">" +i+ "</a>";  
                        }  
                        else  
                        {  
                            pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\">" +i+ "</a>";  
                        }  
                    }  
                }  
                else if (dbPage > totalPages-pageSlipt)  
                {  
                    for (i=totalPages-pageFor+1; i<=totalPages; i++)   
                    {  
                        if (i == dbPage)   
                        {  
                            pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\" class=\"this\">" +i+ "</a>";  
                        }  
                        else  
                        {  
                            pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\">" +i+ "</a>";  
                        }  
                    }  
                }  
                else  
                {  
                    for (i=dbPage-pageSlipt; i<=parseInt(dbPage)+parseInt(pageSlipt); i++)   
                    {  
                        if (i == dbPage)   
                        {  
                            pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\" class=\"this\">" +i+ "</a>";  
                        }  
                        else  
                        {  
                            pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\">" +i+ "</a>";  
                        }  
                    }  
                }  
                }  
                else  
                {  
                    for (i=1; i<=totalPages; i++)   
                    {  
                        if (i == dbPage)   
                        {  
                            pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\" class=\"this\">" +i+ "</a>";  
                        }  
                        else  
                        {  
                            pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\">" +i+ "</a>";  
                        }  
                    }  
                }  
      
                if (parseInt(dbPage)<parseInt(totalPages))   //如果当前页小于总页数,则显示下一页  
                {  
                    var dbPageNext = parseInt(dbPage)+1;  
                    pageHTML += "<a href=\"javascript:pageShow('"+ dbPageNext +"','"+totalPages+"');\">下一页></a>";  
                }  
                  
                $(".pages").html(pageHTML);  
            });  
        }  
        </script>  
          
    </head>  
    <body>  
        <div class="pages"></div>  
    </body>  
    </html>  

    效果:


    展开全文
  • cocos2d - JS 实现翻页效果

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

    cocos2d - JS 实现翻页效果 :

    显示效果 :

    这里写图片描述

    这里写图片描述

    说明 :

    Demo实现了常见的翻页效果 , 还有点击选关模式的放大效果 .

    翻页效果主层 JavaScript 代码 :

    
    var SelectModeLayer = cc.Layer.extend({
        deltaCount : null,   //拖动距离累计
        curSelectPage : null,  //当前页面
        curSelectMode : null,  //当前选择模式
        modeArr : null,   //模式数组
        pageWidth : null,    //页面宽度
        pageNum : null,    //总页数
    
        onEnter: function(){
            this._super();
            this.initData();
            this.init();
            this.addListener();
    
        },
    
        initData: function(){
            this.modeArr = [];
            this.pageWidth = 1920;
            this.pageNum = GameInfo.SelecteModeNum;
            this.curSelectPage = UserDate.CurrentMode - 1;
        },
    
        init: function(){
            for(var i = 1; i <= this.pageNum; i++)
            {
                var bg = new cc.Sprite(res["selectbg" + i]);
                bg.setPosition(cc.winSize.width/2 + this.pageWidth * (i - 1), cc.winSize.height/2);
                this.addChild(bg);
    
                var ground = new cc.Sprite(res.ground);
                ground.setPosition(cc.winSize.width/2 + this.pageWidth * (i - 1), 100);
                this.addChild(ground);
    
                var modepic = new cc.Sprite(res["mode" + i]);
                modepic.setTag(i);
                modepic.setPosition(cc.winSize.width/2 + this.pageWidth * (i - 1), cc.winSize.height/2);
                this.addChild(modepic);
                this.modeArr.push(modepic);
            }
            this.setPositionX(-this.pageWidth * this.curSelectPage);
        },
    
        onTouchBegan: function(touch,event){
            this.stopAllActions();
            var arr = this.modeArr;
            for(var i = 0; i < arr.length; i++)
            {
                var target = arr[i];
                var locationInNode = target.convertToNodeSpace(touch.getLocation());
                var size = target.getContentSize();
                var rect = cc.rect(0, 0, size.width, size.height);
                if (cc.rectContainsPoint(rect, locationInNode))
                {
                    this.curSelectMode = this.modeArr[i];
                    var scaleTo = cc.scaleTo(0.1,1.1);
                    this.curSelectMode.runAction(scaleTo);
                }
            }
    
            return true;
        },
    
        onTouchMoved: function(touch,event){
    
            var delta = touch.getDelta();
            this.deltaCount += delta.x;
            this.x += delta.x * 1.3;
            if(this.x >= 0)
            {
                this.x = 0;
            }
            else if(this.x <= -this.pageWidth * (this.pageNum - 1))
            {
                this.x = -this.pageWidth * (this.pageNum - 1);
            }
    
        },
    
        onTouchEnded: function(touch,event){
    
            if(this.deltaCount <= -150)
            {
                this.curSelectPage++;
            }
            else if(this.deltaCount >= 150)
            {
                this.curSelectPage--;
            }
            else
            {
                if(this.curSelectMode)
                {
                    playEffect(sound.button_sound);
                    var mode = this.curSelectMode.getTag();
                    //cc.log("进入模式 = " + mode);
                    UserDate.CurrentMode = mode;
                    transScene(SelectLevelScene);
                }
            }
    
            if(this.curSelectMode && this.curSelectMode.getScale() > 1)
            {
                this.curSelectMode.stopAllActions();
                var ScaleTo = cc.scaleTo(0.1,1);
                this.curSelectMode.runAction(ScaleTo);
            }
    
            this.curSelectMode = null;
            this.deltaCount = 0;
            this.moveToSelectPage();
    
        },
    
        moveToSelectPage: function(){
            if(this.curSelectPage < 0)
            {
                this.curSelectPage = 0;
            }
            else if(this.curSelectPage > (this.pageNum - 1))
            {
                this.curSelectPage = (this.pageNum - 1);
            }
            this.stopAllActions();
            var moveTo = cc.moveTo(0.4, -this.pageWidth * this.curSelectPage, 0);
    
            var callback = cc.callFunc(function(){
                selectModeUILayer.refreshUI(this.curSelectPage);
            }.bind(this));
    
            var seq = cc.sequence(moveTo,callback);
            this.runAction(seq);
        },
    
        addListener: function() {
            cc.eventManager.addListener(cc.EventListener.create({
                event: cc.EventListener.TOUCH_ONE_BY_ONE,
                swallowTouches: true,
                onTouchBegan: this.onTouchBegan.bind(this),
                onTouchMoved: this.onTouchMoved.bind(this),
                onTouchEnded: this.onTouchEnded.bind(this)
            }), this);
        }
    
    });

    翻页效果UI层 JavaScript 代码 :

    var SelectModeUILayer = cc.Layer.extend({
        pointArr : null,   //页面标记点
        pageNum : null,    //总页数
        onEnter: function(){
            this._super();
            this.initData();
            this.createPoint();
        },
    
        initData: function(){
            selectModeUILayer = this;
            this.pageNum = GameInfo.SelecteModeNum;
            this.pointArr = [];
        },
    
        createPoint: function(){
            var spacing = 130;
            var url;
            for(var i = 1; i <= this.pageNum; i++)
            {
                if(i === UserDate.CurrentMode)
                {
                    url = res.point2;
                }
                else
                {
                    url = res.point1;
                }
                var point = new cc.Sprite(url);
                point.setPosition( ((-this.pageNum / 2) + i - 0.5) * spacing + cc.winSize.width/2, cc.winSize.height - 120);
                this.addChild(point);
                this.pointArr.push(point);
            }
    
            var backBtn = new cc.Menu(new cc.MenuItemImage(res.backBtn, res.backBtn2, this.backCallback, this));
            backBtn.setPosition(160, cc.winSize.height - 150);
            this.addChild(backBtn,100);
        },
    
        backCallback: function(){
            cc.log("back");
        },
    
        refreshUI : function(pos){
            var arr = this.pointArr;
            for(var i = 0; i < arr.length; i++)
            {
                arr[i].initWithFile(res.point1);
            }
    
            arr[pos].initWithFile(res.point2);
    
        }
    
    });
    
    展开全文
  • Turn.js 实现翻页效果

    2012-08-05 19:07:00
    Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来...Turn.js 支持硬件加速来让翻页效果更加平滑。 View Code <html> <head> <title>Turn</title> <script src="http:...
    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>

     

     

    效果如下:

    转载于:https://www.cnblogs.com/hoholuo/archive/2012/08/05/2624103.html

    展开全文
  • 主要介绍了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

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

     

     

    展开全文
  • 利用纯JavaScript实现3D的翻页效果 支持前一页后一页翻页 翻页时有3D效果
  • Javascript实现的杂志翻页效果 Javascript实现的杂志翻页效果
  • 本文主要介绍JavaScript中利用transform实现数字翻页效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
  • 表格翻页的实现方式有很多,下面以js为例为大家详细介绍下表格翻页效果的具体实现,感兴趣的朋友可不要错过
  • 主要介绍了CSS3+JavaScript实现翻页幻灯片效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 表格翻页的实现方式有很多,下面以js为例为大家详细介绍下表格翻页效果的具体实现,感兴趣的朋友可以参考下
  • 关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果,本篇文章只是讲解 turn.js 如何使用!!!!!!! 文章最后提供源码下载,结合源码看本文,turn.js更简单!首先附上个人的文件路径对于css 和 ...
  • 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...
  • 主要介绍了使用原生JS实现滚轮翻页效果的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了JS实现的3D拖拽翻页效果,通过鼠标事件结合时间函数动态操作页面元素实现拖拽翻页的效果,需要的朋友可以参考下
  • JS实现的多种翻页效果,有多个实例,对于用JS来翻页的朋友是不错的学习素材
  • JS实现图片翻书效果-懒人图库#center {LEFT: 50%; POSITION: absolute; TOP: 50%}#DHTMLBOOK {BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px...
  • 主要介绍了JavaScript实现翻页功能(附效果图),在项目需求中经常遇到,今天小编抽时间给大家分享JavaScript实现翻页功能实例代码,需要的朋友参考下吧
  • JS实现图片翻页效果

    2009-02-27 13:46:15
    JS在不改变原图的情况下呈现图片翻页的视觉效果
  • 超酷文字列表JS代码实现拖拽翻页效果下载
  • 主要介绍了javascript移动端 电子书 翻页效果实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • js翻页效果实现

    万次阅读 2017-10-24 13:31:48
    1)功能:实现书籍翻页效果 2)使用插件:turn.js2、示例 1)前提工作 – 需要提前计算数据总页数,提前生成需要的页数 – 初始化翻书插件 2)实践 html代码片段示例:<!DOCTYPE html> 翻书</title>
  • 一、滚轮事件当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的。在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 “mousewheel” 事件...
  • H5和turn.js实现电子书翻页效果

    千次阅读 2020-05-01 09:25:55
    电子书的翻页效果实现,需要用到H5的插件JS文件turn.js 首先看效果图: 展示一下文件目录 这个效果需要自己下载一个turn的JS文件,我是通过Git的地址clone下载下来的。 turn.js完整文件展示 然后再自己随便复制...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,277
精华内容 3,710
关键字:

js实现翻页效果