turn.js 模版简单使用

最新推荐文章于 2024-07-29 11:53:27 发布
最新推荐文章于 2024-07-29 11:53:27 发布
阅读量696 收藏
点赞数 1
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sdgjah2/article/details/134218124
版权

turn.js 不修改添加原功能仅 替换、修改图片格式使用模版

HTML文件

turn.js官网：http://www.turnjs.com/#

第一步

1.点击链接去到官网  

2.点击下载按钮  下载左侧示例压缩包

3.解压完成拿到示例文件 turnjs4

4.在samples目录下案例中查看意向使用的模版样式  

        注：点击进入文件后里面的html文件可以直接访问

5.将整个turnjs4拖拽到编辑器中  多余的文件最好等修改完以后再删除

6.在页面最下方 找到引用的js文件 

7.  只替换图片不做太大改动的话  到js文件里面 直接搜jpg  模版默认用的是jpg图片

将图片格式修改为自己图片的格式  这个地方就是图片引用的代码 动态渲染的

8.这个地方的png是 点击下方滚动条显示的小图片  里面的宽高是控制小图片大小的

9.总共有多少个单张页面  从1开始  多少张单张页面在这个地方循环遍历 动态加入

就这几个地方改一下就行了

段wl
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
node.js使用手册_权威的Node.js手册
07-28 4658
node.js使用手册Note: you can get a PDF, ePub, or Mobi version of this handbook for easier reference, or for reading on your Kindle or tablet. 注意：您可以获取本手册的PDF，ePub或Mobi版本，以方便参考或在Kindle或平板电脑上阅读。 Node.js简介...
vue.js 构建项目_使用Vue.js构建科学计算器
culiu9261的博客
07-20 452
vue.js 构建项目Vue gives the everyday software developer a certain flexibility and seamless experience that may be hard to come across when using other frameworks to build applications. Vue为日常软件开发人员提供了一...
基于turn.js官网通过vue实现的一个翻页效果
11-13
基于turn.js官网通过vue实现的一个翻页效果 脚手架使用vue cli4
使用JQuery的turn.js库来实现翻书效果
qq_29701691的博客
09-08 1899
一淘模板（56admin.com）本篇文章给大家介绍jQuery的turn.js库，聊聊使用turn.js库实现翻书效果，希望对大家有所帮助！今天来和大家分享下JQ的turn.js，下面我先来简单介绍下我们今天的主角turn.js。Turn.js是一个JavaScript库，它集合了HTML5的所有优点，可以使我们的内容看起来像一本书或杂志，有真实的翻阅的效果。
turn.js 实现仿真翻书的效果
qq_46344419的博客
07-21 851
turn.js 实现仿真翻书的效果
pdf.js+turn.js实现电子书3d翻页效果
qq_51035159的博客
06-03 404
网上查了很多资料最后终于弄好了，记录一下。
如何制作我的第一个Phaser.js游戏
codingclassonline
08-13 2108
如何制作Phaser.js游戏？让我们一步一步跟着做吧！首先准备模板和图片……Phaser.js是一款JavaScript语言的网页游戏框架。它简洁易用、跨平台、功能强大、性能良好，是不可多得的游戏制作工具。Phaser.js是一款JavaScript语言的网页游戏框架。它简洁易用、跨平台、功能强大、性能良好，是不可多得的游戏制作工具。...
vue.js 构建项目_使用Vue.js 2构建待办应用
culiu9261的博客
07-21 408
vue.js 构建项目Vue is a simple and minimal progressive JavaScript framework that can be used to build powerful web applications incrementally. Vue是一个简单而最少的渐进式JavaScript框架，可用于逐步构建强大的Web应用程序。 Vue is a lig...
vue.config.js的优化配置
qq575792372的博客
05-08 2218
直接上代码配置： 'use strict' const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } const name = 'vue Admin Template' // page title // If your port is set to 80, // use administrator privileges to execute the command line..
vue中go.js的使用教学（五：数据绑定）
Blue54的博客
02-21 1730
Point 类包含一个静态函数，可用于将字符串转换为Point对象。它期望输入字符串中有两个数字，表示 Point.x 和Point.y值。它返回具有这些值的 Point 对象。可以将转换函数作为第三个参数传递给Binding构造函数。在本例中，它是。这允许以字符串 （“100 50”） 的形式指定位置，而不是作为返回Point的表达式指定。对于模型对象上的数据属性，您通常需要使用字符串作为点s、大小s、矩形s、边距s 和点s 的表示形式，而不是对这些类对象的引用。字符串很容易在JSON和XML中读写。
turn.js 模拟书籍翻页
02-12
- ECMAScript 6（ES6）及以上版本引入了许多新特性，如类、箭头函数、模板字符串等，这些在Turn.js的实现和使用中可能有所应用。 3. **前端开发**： - 前端开发是构建Web应用程序的重要部分，主要负责用户可见和...
移动端H5开发 Turn.js实现很棒的翻书效果
10-22
主要为大家详细介绍了Turn.js实现很棒的翻书效果，对Turn.js翻书效果的实现进行总结，感兴趣的小伙伴们可以参考一下
turn.min.js 演示
11-20
总的来说，"turn.min.js"是一个强大的JavaScript库，它使得在网页上实现生动的书籍翻页效果变得简单易行。只要正确引入库文件，并结合适当的HTML结构和JavaScript配置，就能轻松创建出具有吸引力的在线阅读体验。在...
Web_Turnos:轮流使用的一般网站
04-18
总的来说，"Web_Turnos"项目展示了JavaScript在构建高效、用户友好的轮流使用系统中的强大能力。通过合理的架构设计和编程实践，开发者可以创造出满足不同需求的在线服务平台，提升服务质量和效率，同时也为用户带来...
Ebook翻书的Flash模板.rar
07-04
需要注意的是，随着HTML5和CSS3的发展，Flash的使用逐渐减少，因此在新的项目中，开发者可能会选择使用更加现代的技术栈来实现类似的翻书效果，例如CSS3的动画和JavaScript库，如turn.js或Pageflip。然而，对于仍然...
采用原生js分页模板TurnPage实现分页查询thinkphp5.1数据
yang1234567898的博客
03-22 1023
目的： 由于thinkphp官方自带的翻页按钮太丑了，加上想用js实现，最重要的是，找前端的朋友帮忙做，他说这个实现之后也会跟模板不兼容，还说我不懂，我立马就查找资料搞起来 第一步：js填充翻页按钮 html: <div class="pagelist"></div> <script> //获取翻页div的节点 var wrapper = document.querySelector('.p..
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 648
JavaScript青少年简明教程：函数及其相关知识（下）
【React 】开发环境搭建详细指南
lph159的博客
07-24 1372
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
最新发布
努力做最接地气的编程干货分享，感谢关注
07-29 1278
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
pdf.js和turn.js怎么一起使用
04-04
PDF.js和Turn.js是两种不同的JavaScript库，分别用于呈现PDF文档和创建翻页式图书效果。虽然它们可以独立使用，但是如果你想让PDF文档在翻页式图书中呈现，那么就需要将它们结合起来使用。 以下是将PDF.js和Turn.js结合起来使用的步骤： 1. 首先，你需要下载PDF.js和Turn.js的JavaScript文件，并将它们添加到你的HTML页面中。 2. 接下来，你需要创建一个包含PDF文档的div元素，然后使用PDF.js将PDF文档呈现在该div元素中。以下是一个简单的例子： ```html <div id="pdf"> <!-- PDF document will be rendered here --> </div> <script src="pdf.js"></script> <script> var pdfDoc = null; var pageNum = 1; var pageRendering = false; var pageNumPending = null; function renderPage(num) { pageRendering = true; pdfDoc.getPage(num).then(function(page) { var scale = 1.5; var viewport = page.getViewport({scale: scale}); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; document.getElementById('pdf').appendChild(canvas); var renderContext = { canvasContext: ctx, viewport: viewport }; var renderTask = page.render(renderContext); renderTask.promise.then(function() { pageRendering = false; if (pageNumPending !== null) { renderPage(pageNumPending); pageNumPending = null; } }); }); document.getElementById('page_num').textContent = num; } function queueRenderPage(num) { if (pageRendering) { pageNumPending = num; } else { renderPage(num); } } function onPrevPage() { if (pageNum <= 1) { return; } pageNum--; queueRenderPage(pageNum); } function onNextPage() { if (pageNum >= pdfDoc.numPages) { return; } pageNum++; queueRenderPage(pageNum); } document.getElementById('prev').addEventListener('click', onPrevPage); document.getElementById('next').addEventListener('click', onNextPage); PDFJS.getDocument('helloworld.pdf').then(function(pdfDoc_) { pdfDoc = pdfDoc_; document.getElementById('page_count').textContent = pdfDoc.numPages; renderPage(pageNum); }); </script> ``` 请注意，上面的代码假定你已经下载了一个名为“helloworld.pdf”的PDF文档，并将其放在与HTML文件相同的目录中。 3. 接下来，你需要使用Turn.js创建一个翻页式图书效果。以下是一个简单的例子： ```html <div id="book"> <div style="background-image:url(page1.jpg)"></div> <div style="background-image:url(page2.jpg)"></div> <div style="background-image:url(page3.jpg)"></div> <!-- add more pages as needed --> </div> <script src="turn.min.js"></script> <script> $('#book').turn({ width: 800, height: 600, autoCenter: true }); </script> ``` 请注意，上面的代码假定你已经有一组页面图像（例如page1.jpg，page2.jpg等），并将它们放在与HTML文件相同的目录中。 4. 最后，将PDF文档的canvas元素添加到Turn.js的页面div元素中。以下是一个简单的例子： ```html <div id="book"> <div style="background-image:url(page1.jpg)"></div> <div style="background-image:url(page2.jpg)"></div> <div id="pdf-page"></div> <div style="background-image:url(page3.jpg)"></div> <!-- add more pages as needed --> </div> <script src="turn.min.js"></script> <script> $('#book').turn({ width: 800, height: 600, autoCenter: true }); var pdfPage = document.getElementById('pdf').getElementsByTagName('canvas')[0]; var pdfDiv = document.getElementById('pdf-page'); pdfDiv.appendChild(pdfPage); </script> ``` 请注意，上面的代码假定你已经将PDF文档的canvas元素添加到一个名为“pdf”的div元素中。 通过这些步骤，你应该能够创建一个翻页式图书，其中包含一个呈现PDF文档的页面。请注意，上面的代码只是一个简单的示例，你需要根据你自己的需求进行修改和定制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值