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

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

在线阅读使用第三方的js类库,有放大缩小的功能,需要准备两张不同分辨率的图片,用js使小图片对应大图片得路径。turn.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 />');    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();
});

 

下载地址:源码

 

效果图:

转载于:https://www.cnblogs.com/ForEvErNoME/archive/2012/09/19/2694031.html

分享幻灯片+在线阅读相关推荐

  1. 分享一个Android源码在线阅读的网址

    分享一个Android源码在线阅读的网址 :http://androidxref.com/4.2.2_r1/

  2. 计算机文化在线阅读,TOP18[定稿]计算机文化基础教案34171.doc文档免费在线阅读...

    <[定稿]计算机文化基础教案34171.doc>由会员分享,可免费在线阅读全文,更多与<TOP18[定稿]计算机文化基础教案34171.doc文档免费在线阅读>相关文档资源请在 ...

  3. 阅读全文 html,看看纽约时报是怎么用HTML 5设计在线阅读产品的

    一.纽约时报都有哪些功能? 在firefox浏 览器下打开纽约时报,有一个地方很值得注意:"此网站(www.nytimes.com)提供了保存至您计算机以供脱机使用的数据."从这句 ...

  4. 《在你身边,为你设计》-哪位知道下载、在线阅读地址啊?

    <在你身边,为你设计>-前端UI必读 出自腾讯CDC http://cdc.tencent.com/?p=6761 今天听同事说这本书写的非常好,改变了他关于前端UI的许多看法,可谓:醍醐 ...

  5. 计算机二级考试试题在线看,【TOP182015年全国计算机二级考试试题题库.doc文档免费在线阅读材料】...

    TOP182015年全国计算机二级考试试题题库.doc文档免费在线阅读 <2015年全国计算机二级考试试题题库.doc>由会员分享,可免费在线阅读全文,更多与<TOP182015年全 ...

  6. 搜索和在线阅读 Github 代码的插件推荐

    2019 年第 31 篇,总 55 篇文章 上一篇文章 推荐了 3 个 Github 相关的项目,这次继续推荐 3 个项目,严格说是 3 个插件,主要是帮助搜索 Github 项目和在线阅读代码的插件 ...

  7. 一个基于 SpringBoot 开源的小说和漫画在线阅读网站,简洁大方 !强烈推荐 !

    来源:GitHub精选 今天给大家推荐的这个开源项目是一个基于 SpringBoot 实现的小说和漫画在线阅读网站. 这个开源项目叫:fiction_house. 这个开源项目是一个多平台(web.安 ...

  8. 一个基于 SpringBoot 开源的小说和漫画在线阅读网站,简洁大方、强烈推荐

    来源:GitHub精选 今天给大家推荐的这个开源项目是一个基于 SpringBoot 实现的小说和漫画在线阅读网站. 这个开源项目叫:fiction_house. 这个开源项目是一个多平台(web.安 ...

  9. 计算机基础在线阅读,TOP16[定稿]计算机基础教案(上下册).doc文档免费在线阅读...

    <[定稿]计算机基础教案(上下册).doc>由会员分享,可免费在线阅读全文,更多与<TOP16[定稿]计算机基础教案(上下册).doc文档免费在线阅读>相关文档资源请在帮帮文库 ...

最新文章

  1. 网上不知名的示波器方案记录
  2. finalshell连接超时怎么解决_电脑无线网络连接不上怎么回事 电脑连不上无线网络的解决方法...
  3. Windows上 万能的串口调试助手
  4. 《程序员代码面试指南第二版》Python实现(个人读书笔记)
  5. Scrollbar中滚动条的设置
  6. OAuth(开放授权):(第三方)通过(授权)令牌(Access Token)访问用户数据
  7. PPIO创始人王闻宇:从PPTV到PPIO,创业路上的挑战与思考
  8. Comparable和Comparator的区别
  9. AngularJS之watch
  10. ubuntu 16.04常用命令
  11. Gartner 企业级网络设备市场份额报告:阿里云负载均衡增速全球第一
  12. Excel表格生成sql语句
  13. 云计算的SPI服务模型
  14. 我的Python成长之路---第三天---Python基础(9)---2016年1月16日(雾霾)
  15. 在C#中,List struct中的值是否装箱?
  16. iOS开发的几种加密方式
  17. 使用virtualenv和pip构建项目所需的独立Python环境
  18. docker基础2--镜像基本操作
  19. TFS2010物理迁移workspace恢复
  20. 2021-09-27 人民邮电出版社网址下获取新书推荐的所有图书名称

热门文章

  1. nrf52832之GPIO
  2. Android广告Banner实现
  3. win10更新后C盘可用空间越来越小怎么办
  4. 大型企业通用ERP进销存仓库财务管理系统源码带完整文档
  5. html爱情表白网页模板下载_响应式爱情表白网页代码_HTML静态页面下载
  6. python批量识别图片中文字_如何用Python识别图片中的文字?
  7. 史上最强 Tomcat8 性能优化实战!
  8. Java中static关键字的作用
  9. html字体边缘怎么带颜色,带有html背景和字体颜色问题的MathJax
  10. BZOJ 2386: [Ceoi2011]Team