学步园

分享一个简洁的幻灯片与在线阅读的功能。

幻灯片最主要的环节是控制图片的出现与消失。

在线阅读使用第三方的js类库，有放大缩小的功能，需要准备两张不同分辨率的图片，用js使小图片对应大图片得路径。turn.js

 

幻灯片slider.js：

$(document).ready(function () {
    
    $(".ot-slide:eq(0)").fadeIn(200);   
    var slideMax = $(".ot-slide").length;
    var curSlide = 0;
    var prevSlide;
    
    function doThe(dir){
      var nextSlide;
      /*var cMove;*/
      
      if (dir == 'prev') {
        if (curSlide == 0) {
          nextSlide = slideMax-1;
        } else {
          nextSlide = curSlide-1;
        }
        /*cMove = '100%';*/
      } else if (dir == 'next') {
        if (curSlide + 1 == slideMax) {
          nextSlide = 0;
        } else {
          nextSlide = curSlide+1;
        }
        /*cMove = '-100%';*/
      }
      
      $(".ot-slide").eq(curSlide).fadeOut(300);
      $(".ot-slide").eq(nextSlide).fadeIn(300);
      if (nextSlide == 0) { curSlide = 0; } else {
        curSlide = nextSlide;
      }
    }
    
    if (2 > $('.ot-slide').length) { 
      $("[id^=ot-s-]").hide();
    }
    
    if ($(".two-c").children("li").length == 1) { $(".two-c").children("li").css({'width':'auto'}); }
    
    $("[id^=ot-s-]").live('click',function(){
      if ($(".ot-slide").length > 1) {
        if (!$(".ot-slide").is(":animated")) {
          var direct = $(this).attr('id').split('ot-s-')[1];
          if (direct == 'left') { direct = 'prev'; } else if (direct == 'right') { direct = 'next'; }
          doThe(direct);
        }
      }
    });
  });

 

在线阅读viewpdf.js：

var ibase='images/';

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();
  });  
  
  if (page==1) {
    page = '00';  
  } else if (page == 12) {    
    page = '06';  
  } else {    
    if (page%2==0) {       
        page = '0'+Math.floor(page/2)+'a';         
    } else {          
        page = '0'+Math.floor(page/2)+'b';        
    }    
  }

  img.attr('src', ibase + page + '.jpg');
}

function loadSmallPage(page, pageElement) {        
  var img = pageElement.find('img');    
  img.css({width: '100%', height: '100%'});    
  img.unbind('load');  
  if (page==1) {    
    page = '00';  
  } else if (page == 12) {    
    page = '06';  
  } else {    
    if (page%2==0) {          
        page = '0'+Math.floor(page/2)+'a';       
    } else {           
        page = '0'+Math.floor(page/2)+'b';       
    }  
  }
img.attr('src', ibase + page + '-small.jpg');
}

function isChrome() {
    return navigator.userAgent.indexOf('Chrome')!=-1;
}

function resBox() {
  if ($(window).height() > $("#pi-box").height()) {
    $("#pi-box").css({'height':$(window).height()});
  }
}


$(document).ready(function () {

    $(".previous-button").hide();

    $("#flipbook").turn({
        width: 940,
        height: 376,
        acceleration: !isChrome(),
        autoCenter: true,
        when: {
            turning: function (event, page) {
                if (page == 1) {
                    $(".previous-button").hide();
                } else $(".previous-button").delay(400).fadeIn(400);
                if (page == $("#flipbook").turn('pages')) {
                    $(".next-button").hide()
                } else $(".next-button").delay(400).fadeIn(400);
            }
        }
    });
    if ($("html").hasClass("touch")) {
        $(".page").children("img").each(function () {
            var osi = $(this).attr('src').split("-small")[0];
            osi = osi + '.jpg';
            $(this).attr('src', osi);
        });
    }
    if ($("html").hasClass("no-touch")) {
        $('#zoom-viewport').zoom({
            flipbook: $('#flipbook'),
            max: function () {
                return 2350 / $('#flipbook').width();
            },
            when: {
                tap: function (event) {
                    if ($(this).zoom('value') == 1) {
                        if ($('#flipbook').turn('page') != 1) {
                            if ($('#flipbook').turn('page') != $('#flipbook').turn('pages')) {
                                $(this).zoom('zoomIn', event);
                                $('#zoom-viewport').addClass('zoom-in');
                            }
                        }
                    } else {
                        $(this).zoom('zoomOut');
                        $('#zoom-viewport').removeClass('zoom-in')
                    }
                },
                resize: function (event, scale, page, pageElement) {
                    if (scale == 1) loadSmallPage(page, pageElement); else loadLargePage(page, pageElement);
                },
                swipeLeft: function () {
                    $('#flipbook').turn('next');
                },
                swipeRight: function () {
                    $('#flipbook').turn('previous');
                }
            }
        });
    }
    /* 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 () {
        $('#flipbook').turn('next');
    });

    /* Events for the prev 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 () {
        $('#flipbook').turn('previous');
    });

    $(document).keyup(function (e) {
        if (e.keyCode === 27) { if ($("#pi-box").is(":visible")) $("#pi-box").fadeOut(); }
        if (e.keyCode === 37) {
            $('#flipbook').turn('previous');
            e.preventDefault();
        }
        if (e.keyCode === 39) {
            $('#flipbook').turn('next');
            e.preventDefault();
        }
    });

    $("#pibac").live('click', function () {
        $("#pi-box").css({ 'height': $("html").height() });
        resBox();

        $("#pi-box").fadeIn();
        return false;
    });

    console.log($("#pi-box").width());

    $("#pi-box").live('click', function () { if ($("#pi-box").is(":visible")) $("#pi-box").fadeOut(); });
    $("#pi-main").live('click', function (e) { e.stopPropagation(); });
    $("#pibclose").live('click', function () {
        if ($("#pi-box").is(":visible")) $("#pi-box").fadeOut();
    });


});

$(window).resize(function(){
  if ($("#pi-box").is(":visible")) resBox();
});
$(window).bind('orientationchange',function(){
  if ($("#pi-box").is(":visible")) resBox();
});

 

下载地址：源码

 

效果图：