Turn.js创建类似书本和杂志翻页效果

最新推荐文章于 2025-05-15 07:53:29 发布
最新推荐文章于 2025-05-15 07:53:29 发布
阅读量1.7k 收藏
点赞数
分类专栏： html/js
Turn.js是一款轻量级的jQuery/html5插件，用于创建类似书籍和杂志的翻页效果，支持触摸屏设备并利用硬件加速实现平滑翻页。此插件可通过API控制页面展示，并允许开发者定制翻页效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

http://www.oschina.net/p/turnjs

Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果，支持触摸屏设备。

Turn.js 支持硬件加速来让翻页效果更加平滑。

可通过 API 来获取当前显示的页号，并提供选项来定制默认页号、加速器、阴影和延时。

翻页效果截图：

使用方法：


turn.js实现图书翻页
12-07
使用turn.js实现图书的翻页预览效果
turn.js实现翻书效果(自适应单双页)
10-10
TURN.JS 实现翻书效果(自适应单双页)
探索Turn.js：打造惊艳的3D翻页效果
最新发布
沐白的博客
05-15 2600
Turn.js 是一个基于 jQuery 的 JavaScript 库，专注于实现类书籍翻页的 3D 动画效果，支持 HTML5 和 CSS3，适配移动端触摸设备。其核心特性包括逼真的翻页动画、高度可定制性、跨平台兼容性以及动态加载页面内容。安装 Turn.js 需要先引入 jQuery 1.7+，并可通过 npm 或 CDN 进行安装。基础用法包括创建 HTML 结构和初始化 JavaScript 配置，支持通过参数调整书本尺寸、翻页方向、动画时长等。Turn.js 还提供了事件监听、动态加载页面、兼容性
css3+js翻页效果三：书本翻页
youyouyouyou44的博客
12-02 1116
css样式是酱紫的： *{margin:0; padding:0} body,html{ /*防止抖动*/ overflow: hidden; } #box{ width:700px; height:400px; background: url("img/0.jpg") no-repeat; marg...
turn.js 类似书籍翻页的效果
u014704496的专栏
08-26 1663
turn.js   类似书籍翻页的效果
VUE翻书效果（vue+ turn.js 实现翻书效果）
神尐破
08-09 6314
vue+ turn.js 实现翻书效果 单页/双页。
turn.js实现书本翻页效果插件
08-27
Turn.js 是一个强大的JavaScript库，专门用于在网页上创建具有真实翻页效果的电子书或杂志样式的内容。这个插件利用HTML、CSS和JavaScript技术，为用户提供了类似于真实纸质书籍的交互体验，使得数字内容更加生动...
基于turn.js官网通过vue实现的一个翻页效果
11-13
基于turn.js官网通过vue实现的一个翻页效果 脚手架使用vue cli4
turn.js实现pc端翻书效果
02-22
Turn.js库文件（如`turn.min.js`）提供了创建和控制翻页效果的API，包括初始化书本、设置选项、监听翻页事件等功能。此外，开发者可以根据需求编写额外的脚本来扩展或定制Turn.js的行为，例如响应用户的点击事件、...
Turn.js jQuery插件打造网页杂志翻页效果
Turn.js是一个强大的jQuery插件，允许开发者在网页中创建翻页效果，类似于真实世界中翻阅杂志或书本的体验。Turn.js插件以其流畅的动画和自然的翻页效果而受到开发者的青睐。此插件不仅能够提供美观的视觉体验，还...
Turn.js 基于 jQuery 的移动端翻书插件
08-20
Turn.js 是一个轻量级的插件，通常与 jQuery 用创建类似书本和杂志翻页效果，支持触摸屏设备。
turn.js
02-01
turn.js
移动端H5开发 Turn.js实现很棒的翻书效果
10-22
主要为大家详细介绍了Turn.js实现很棒的翻书效果，对Turn.js翻书效果的实现进行总结，感兴趣的小伙伴们可以参考一下
前端Vue书籍翻页功能利用turn.js来完成以及知识点(源码)
m0_49714202的博客
05-26 6038
目录下载文档开始构造方法可配置项方法语法事件两种方式添加事件案例CSSbasic.css源码如下JS里面代码太多了,直接官网下载index.html源码如下最终效果如下 下载 下载完里面有源码,好几种翻页效果,很不错~ 官网 文档 接口文档 开始 构造方法 $('#flipbook').turn([options]); 可配置项 $('.flipbook').turn({ width: 922, //宽度 height: 600, //高度 a
基于turn.js实现的书本翻页效果(vue)
weixin_45626143的博客
11-13 2555
基于turn.js实现的书本翻页效果 vue 项目搭建 vue cli4 vue引入turn.js 引入jQuery npm nistall jquery --save vue.config.js文件 const webpack = require("webpack"); module.exports = { configureWebpack: { //支持jquery plugins: [ new webpack.Provide
vue项目结合turn.js实现pdf翻书预览
五颜六色的白
08-25 1367
vue项目结合turn.js实现pdf翻书预览
VUE D2Admin中引用turn.js 实现翻书效果
loa_loa的博客
10-24 5973
1.把几个JS文件放到路径…\public文件夹下   2.框架的html页面引用几个Js（…\public\index.html） <script src="./extras/jquery.min.1.7.js"></script> <script src="./extras/modernizr.2.5.3.min.js"></script&...
vue使用pdfjs+turn.js实现翻页
weixin_43526126的博客
08-15 2138
碰到一个需要实现PDF翻书效果，找到一些大佬的文章，记录一下，以防下次忘记。大致思路就是，先将PDF解析成图片，再将图片做成翻书特效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值