turn.js禁止顶部翻页

最新推荐文章于 2023-02-28 15:18:00 发布
最新推荐文章于 2023-02-28 15:18:00 发布
阅读量1k 收藏 2
点赞数 2
分类专栏： turnjs 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014717791/article/details/117823171
版权

这两天接到个需求，需要翻页的效果，网上查了下，用到1个叫基于jq名为turn.js的插件

经过百度，效果大概是弄出来了，这是产品又说只要底部能翻页就够了

作为一名小白，研究了下源码，瞌睡马上就来了...

好了，我说下瞎猫碰死耗子的方法

下图为源码，有需要的可以ctrl+F查找下它的位置

既然不要顶部，那我就把tl tr这两个角清空了，我也不删除那俩元素占位

因为不知道后面他源码是怎么使用这个对象数组的

效果是出来了，点击顶部，发现已经移除了翻页效果，没有影响到底部的翻页效果

控制台也没报错...

还有一个就是触发翻页的角区域大小，也可以通过修改以下属性调整，因为我做的小项目是h5

所以这里我设置成200，我也不晓得他这区域是个什么形状

本人是个小白白，有更好的解决方案希望你们留言~

_xianck
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
turn.js实现pc端翻书效果
02-22
用turn.js实现PC端的一系列图片形成书本翻页的效果；
turn.js实现书本翻页效果插件
08-27
Turn.js 是一个强大的JavaScript库，专门用于在网页上创建具有真实翻页效果的电子书或杂志样式的内容。这个插件利用HTML、CSS和JavaScript技术，为用户提供了类似于真实纸质书籍的交互体验，使得数字内容更加生动...
js常用插件(九)之移动端翻书效果turn.js
小龚的博客
02-01 2144
js常用插件之turn.js—modernizr翻书效果 欢迎点击: 个人官网博客 首先引入必要的三个文件 <link rel="stylesheet" href="./css/basic.css"> <script src="./js/modernizr.2.5.3.min.js"></script> <script src="./js/turn.js"></script> turn.js modernizr.2.5
turn.js 在微信浏览器里面无法翻页的问题 turn.js:3263
qq_37025885的博客
02-22 830
控制台提示： turn.js:3263 Uncaught SyntaxError: Unexpected identifier     at loadApp (index.html:140)     at j (modernizr.2.5.3.min.js:322)     at modernizr.2.5.3.min.js:300     at h (modernizr.2.5.3.min.j...
Js 之turn.js禁止鼠标悬停页脚动画
样子的博客
11-25 34
一、禁制前效果 二、禁止后 三、代码 1、修改turn.js 这种是彻底去掉动画与翻页 2、加事件 这只会去掉效果，点击会翻页
turn.js
chenxi004的博客
09-28 1474
turn.js （翻页效果）总结 Turn.js是一个内置的jQuery翻页插件 1 html中引入 <script type="text/javascript" src="js/turn.js"></script> 2 创建html <div id="flipbook"> <div class="hard"> Turn.js </di...
前端Vue书籍翻页功能利用turn.js来完成以及知识点(源码)
m0_49714202的博客
05-26 5583
目录下载文档开始构造方法可配置项方法语法事件两种方式添加事件案例CSSbasic.css源码如下JS里面代码太多了,直接官网下载index.html源码如下最终效果如下 下载 下载完里面有源码,好几种翻页效果,很不错~ 官网 文档 接口文档 开始 构造方法 $('#flipbook').turn([options]); 可配置项 $('.flipbook').turn({ width: 922, //宽度 height: 600, //高度 a
javaScript+turn.js实现图书翻页效果实例代码
10-20
JavaScript和Turn.js库结合使用，可以创建出模拟真实图书翻页效果的互动式电子书或杂志。Turn.js是一个强大的JavaScript插件，它提供了丰富的自定义选项和流畅的动画效果，适用于网页上的数字出版物。 首先，理解...
turn.js 模拟书籍翻页
02-12
Turn.js 是一个强大的JavaScript库，专门用于在网页上创建具有真实感的书籍翻页效果。这个库使得开发者能够轻松地将HTML内容转化为可交互的、类似电子书的体验，为用户带来富有动态视觉效果的阅读体验。在描述中提到...
turn.js实现图书翻页
12-07
Turn.js 是一个强大的JavaScript库，专门用于为网页创建逼真的图书翻页效果。这个库能够将HTML内容转化为具有翻页动态效果的互动电子书，给用户带来类似纸质书的阅读体验。在网页设计中，Turn.js 被广泛应用在电子...
移动端H5开发 Turn.js实现很棒的翻书效果
11-25
最近CTO给我分配了一个移动端H5开发的任务，主要功能是需要实现翻书效果，我听过主要需求后，当时是呀！！！接下来自己尝试使用 fullPage.js和Swiper来实现翻书效果，结果效果都不是非常的理想，后来想起自己曾经做过PC版的翻书效果，当时使用的是Turn.js ，查过其相关API后，整个人突然豁然开朗呀，使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀。现在将个人的学习总结如下，若有不正确的地方，欢迎读者给与批评指正！ Turn.js的官方网址: http://www.turnjs.com/ 下面是我这个项目上线后的效果：   看过实际项目后，各位看官是不是已经迫不
turn.js学习手册
热门推荐
Ta0Zl的博客
08-19 1万+
因为最近用到turn来做一个比赛，所以学习了一下，但是现在没有中文的API文档，所以就自己整理了一下 1.flipbook的部署 1）引入jquery以及turn的js库 2）写入Html Turn.js Page 1 sddsasdssddsd Page 2 Page 3    
swiper 在turn.js不能滚动
马优晨
05-20 472
这个问题，使用turn.js的同学一定遇到过，那怎么解决呢？ 答案： 翻到对应包含swiper 的那页，重新初始化swiper 假设这个是第3页 <div class="page-container flipbook" id="magazine"> <div v-for="(n, index) in 9" :key="`phone_${index}`" :class="`page${index}`" class
js事件-禁止/触发
weixin_30323961的博客
08-10 943
//手动触发回车键$(window).on("keydown", function(e){ var ev = document.all ? window.event : e; if(ev.keyCode==13) { window.location.href = "VRegister.html" }}) $(window).on({ cont...
vue3+turn.js实现翻书的效果，带滚动条
weixin_43485503的博客
07-29 6353
vue3+vite+turn.js实现翻书的效果，带滚动条
turn.js 翻书效果
sinat_35082096的博客
02-28 1094
turn.js 实现翻书动效，可适配手机端、pc端和ipad端
书翻页turn.js踩的坑
judykang123的博客
10-23 2026
用的例子在这里：https://www.jq22.com/jquery-info2534 如果英文好的也可以直接去官网看文档 最简单的使用方法就是直接替换里面的图片，然后分享一下遇到的坑： 会有底部导航栏 翻页时会改变地址栏，唤出微信自带的跳转页面出现的底部白色导航栏 与jq的一些动画 ：animate() 方法 冲突 由翻书唤起的底部导航栏出现后，animate方法会与正常的有偏差，解决办法就是写css动画，然后用js增删class名 单双页 turn函数里面有一个display，s
turn.js教程及总结
qq_43402051的博客
04-10 1万+
先看一眼我制作的简单demo演示图 这部分主要用作演示及养眼 接下来我们来抛开演示图来讲一下如何使用 turn简介 一个基于jquery用来实现3d翻书效果的插件 使用所需 jquery.js、turn.js 这里面jquery全网一查都是, turn.js官网下载太慢了，嫌慢的码友们可以私信我或留言我会发给大家 基本用法 $('#book').turn({ acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true pages: 11, /
turn.js （翻页效果）总结
顺其自然~专栏
11-23 6319
Turn.js是一个内置的jQuery翻页插件 1 html中引入 <script type="text/javascript" src="js/turn.js"></script> 2 创建html <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 &.
h5电子书翻页效果turn.js
最新发布
01-15
h5电子书翻页效果turn.js是一种用于在网页中创建仿真翻页效果的开源JavaScript库。它可以帮助开发人员在网页中轻松地实现电子书的翻页效果，使用户感受到在真实书本中翻页的效果。 turn.js可以与HTML、CSS和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值