分享一个简洁的幻灯片与在线阅读的功能。
幻灯片最主要的环节是控制图片的出现与消失。
在线阅读使用第三方的js类库，有放大缩小的功能，需要准备两张不同分辨率的图片，用js使小图片对应大图片得路径。
幻灯片slider.js：
View Code $(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：
View Code var ibase='images/';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(); }); 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();});
下载地址：
效果图：
