分享幻灯片+在线阅读
分享一个简洁的幻灯片与在线阅读的功能。
幻灯片最主要的环节是控制图片的出现与消失。
在线阅读使用第三方的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(); });
下载地址:源码
效果图:
转载于:https://www.cnblogs.com/ForEvErNoME/archive/2012/09/19/2694031.html
分享幻灯片+在线阅读相关推荐
- 分享一个Android源码在线阅读的网址
分享一个Android源码在线阅读的网址 :http://androidxref.com/4.2.2_r1/
- 计算机文化在线阅读,TOP18[定稿]计算机文化基础教案34171.doc文档免费在线阅读...
<[定稿]计算机文化基础教案34171.doc>由会员分享,可免费在线阅读全文,更多与<TOP18[定稿]计算机文化基础教案34171.doc文档免费在线阅读>相关文档资源请在 ...
- 阅读全文 html,看看纽约时报是怎么用HTML 5设计在线阅读产品的
一.纽约时报都有哪些功能? 在firefox浏 览器下打开纽约时报,有一个地方很值得注意:"此网站(www.nytimes.com)提供了保存至您计算机以供脱机使用的数据."从这句 ...
- 《在你身边,为你设计》-哪位知道下载、在线阅读地址啊?
<在你身边,为你设计>-前端UI必读 出自腾讯CDC http://cdc.tencent.com/?p=6761 今天听同事说这本书写的非常好,改变了他关于前端UI的许多看法,可谓:醍醐 ...
- 计算机二级考试试题在线看,【TOP182015年全国计算机二级考试试题题库.doc文档免费在线阅读材料】...
TOP182015年全国计算机二级考试试题题库.doc文档免费在线阅读 <2015年全国计算机二级考试试题题库.doc>由会员分享,可免费在线阅读全文,更多与<TOP182015年全 ...
- 搜索和在线阅读 Github 代码的插件推荐
2019 年第 31 篇,总 55 篇文章 上一篇文章 推荐了 3 个 Github 相关的项目,这次继续推荐 3 个项目,严格说是 3 个插件,主要是帮助搜索 Github 项目和在线阅读代码的插件 ...
- 一个基于 SpringBoot 开源的小说和漫画在线阅读网站,简洁大方 !强烈推荐 !
来源:GitHub精选 今天给大家推荐的这个开源项目是一个基于 SpringBoot 实现的小说和漫画在线阅读网站. 这个开源项目叫:fiction_house. 这个开源项目是一个多平台(web.安 ...
- 一个基于 SpringBoot 开源的小说和漫画在线阅读网站,简洁大方、强烈推荐
来源:GitHub精选 今天给大家推荐的这个开源项目是一个基于 SpringBoot 实现的小说和漫画在线阅读网站. 这个开源项目叫:fiction_house. 这个开源项目是一个多平台(web.安 ...
- 计算机基础在线阅读,TOP16[定稿]计算机基础教案(上下册).doc文档免费在线阅读...
<[定稿]计算机基础教案(上下册).doc>由会员分享,可免费在线阅读全文,更多与<TOP16[定稿]计算机基础教案(上下册).doc文档免费在线阅读>相关文档资源请在帮帮文库 ...
最新文章
- 网上不知名的示波器方案记录
- finalshell连接超时怎么解决_电脑无线网络连接不上怎么回事 电脑连不上无线网络的解决方法...
- Windows上 万能的串口调试助手
- 《程序员代码面试指南第二版》Python实现(个人读书笔记)
- Scrollbar中滚动条的设置
- OAuth(开放授权):(第三方)通过(授权)令牌(Access Token)访问用户数据
- PPIO创始人王闻宇:从PPTV到PPIO,创业路上的挑战与思考
- Comparable和Comparator的区别
- AngularJS之watch
- ubuntu 16.04常用命令
- Gartner 企业级网络设备市场份额报告:阿里云负载均衡增速全球第一
- Excel表格生成sql语句
- 云计算的SPI服务模型
- 我的Python成长之路---第三天---Python基础(9)---2016年1月16日(雾霾)
- 在C#中,List struct中的值是否装箱?
- iOS开发的几种加密方式
- 使用virtualenv和pip构建项目所需的独立Python环境
- docker基础2--镜像基本操作
- TFS2010物理迁移workspace恢复
- 2021-09-27 人民邮电出版社网址下获取新书推荐的所有图书名称
热门文章
- nrf52832之GPIO
- Android广告Banner实现
- win10更新后C盘可用空间越来越小怎么办
- 大型企业通用ERP进销存仓库财务管理系统源码带完整文档
- html爱情表白网页模板下载_响应式爱情表白网页代码_HTML静态页面下载
- python批量识别图片中文字_如何用Python识别图片中的文字?
- 史上最强 Tomcat8 性能优化实战!
- Java中static关键字的作用
- html字体边缘怎么带颜色,带有html背景和字体颜色问题的MathJax
- BZOJ 2386: [Ceoi2011]Team