turn.js 页面zoom后，翻页位置变动

于 2024-01-05 10:46:26 发布
阅读量489 收藏 11
点赞数 6
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_34831792/article/details/135403976
版权
本文讨论了在网页缩放时如何在JavaScript库turn.js中正确处理滚动事件（如`e.pageX`和`e.pageY`），以计算出适应缩放比例的偏移量。
摘要由CSDN通过智能技术生成

页面缩放后需要计算偏移量。

在翻页这里，需要将原来的e.pageX和e.pageY除以缩放量
即turn.js中 e.pageX/zoom ,e.pageY/zoom

baidu_34831792
关注
  • 6
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
javaScript+turn.js实现图书翻页效果实例代码
12-11
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 turn.js 如何使用！！！！！！！ 文章最后提供源码下载，结合源码看本文，turn.js更简单！ 首先附上个人的文件路径 对于css   和 js文件不需要过多的解释   在这里要注意的是pages文件夹   这里个文件夹下放的是需要预览的图片文件    所以 我们想展示的资源  就放在这个目录下面！！！！！！     接下来  先给大家看一下page
turn.js （翻页效果）总结
鑫鑫的博客
06-02 8161
turn.js （翻页效果）总结 Turn.js是一个内置的jQuery翻页插件 1 html中引入<script type="text/javascript" src="js/turn.js"></script> <script type="text/javascript" src="js/jquery,min.js"></script> 2 创建html <div id="flipbook"> <div class="..
书翻页turn.js踩的坑
judykang123的博客
10-23 2002
用的例子在这里：https://www.jq22.com/jquery-info2534 如果英文好的也可以直接去官网看文档 最简单的使用方法就是直接替换里面的图片，然后分享一下遇到的坑： 会有底部导航栏 翻页时会改变地址栏，唤出微信自带的跳转页面出现的底部白色导航栏 与jq的一些动画 ：animate() 方法 冲突 由翻书唤起的底部导航栏出现后，animate方法会与正常的有偏差，解决办法就是写css动画，然后用js增删class名 单双页 turn函数里面有一个display，s
【elementplus】body使用zoom导致el-dropdown组件的下拉菜单错位的解决方案
bbt953的博客
07-12 2274
body使用zoom导致el-dropdown组件的下拉菜单错位的解决方案
jsplumb所在div局部缩放后，拖动节点出现偏差
KentKun的博客
03-31 2149
jsplumb所在div局部缩放后，拖动节点出现偏差 项目中利用了jsplumb进行画拓补图，其中有个功能需要对拓补图进行缩放，利用transform:scale(0.5);和 transform-origin: 0% 0% 实现整个区域缩放，但发现缩放后移动节点时出现偏差，进过一番周折终于在源码中发现了这个——Zoom； 这明显是对浏览器缩放后拖动节点进行处理。 var pos = _pl(e)...
turn.js实现书本翻页效果插件
最新发布
08-27
Turn.js 是一个强大的JavaScript库，专门用于在网页上创建具有真实翻页效果的电子书或杂志样式的内容。这个插件利用HTML、CSS和JavaScript技术，为用户提供了类似于真实纸质书籍的交互体验，使得数字内容更加生动...
基于turn.js官网通过vue实现的一个翻页效果
11-13
基于turn.js官网通过vue实现的一个翻页效果 脚手架使用vue cli4
turn.js实现翻书效果(自适应单双页)
10-10
Turn.js 是一个强大的JavaScript库，专门用于在网页上创建具有真实感的电子书翻页效果。这个库使得网页上的内容可以模拟出类似纸质书籍的翻页体验，为用户带来更直观、互动性强的阅读感受。在本文中，我们将深入探讨...
手机端,通过js控制去缩放页面
xin的博客
04-15 1263
function adapt() { var mengvalue = -1; //if(mengvalue<0){mengvalue = 0; } var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth / 750; ...
turnjs帮助文档
12-01
turnjs帮助文档
Zoom缩放后el-dropdown下拉菜单位置偏移问题
路人甲的博客
03-29 2847
element的el-dropdown组件存在下拉时会产生偏移的问题解决
zoom缩放后导致element-ui下拉框位置偏移的解决
m0_47132924的博客
09-06 4801
zoom缩放后导致element-ui下拉框位置偏移的解决
使用JQuery的turn.js库来实现翻书效果
qq_29701691的博客
09-08 1885
一淘模板（56admin.com）本篇文章给大家介绍jQuery的turn.js库，聊聊使用turn.js库实现翻书效果，希望对大家有所帮助！今天来和大家分享下JQ的turn.js，下面我先来简单介绍下我们今天的主角turn.js。Turn.js是一个JavaScript库，它集合了HTML5的所有优点，可以使我们的内容看起来像一本书或杂志，有真实的翻阅的效果。
turn.js（翻页效果）学习笔记
qq_34412086的博客
04-04 3007
Turn.js是一个内置的jQuery翻页插件 1 html中引入<script type="text/javascript" src="js/turn.js"></script> 2 创建html <div id="flipbook"> <div style="background-image:url(pages/01.jpg);"><...
turnjs4学习笔记
u010609251的博客
04-05 1565
turnjs4学习笔记前言下载开始准备工作样式构造方法方法事件 前言 领导交代做一个电子书要在手机上能看，要有翻页的效果。本来想在网上直接找一个，无奈素材都要钱，巧的是发现了这个turnjs，实现了翻页的效果。学习了下，大概做个笔记，以后也方便看 make a flip book with HTML5 下载 官网： http://www.turnjs.com/ 首页download下来里面包括所需...
turn.js
chenxi004的博客
09-28 1462
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...
turn.js的zoom.js是什么
07-17
如果 `turn.js` 的 `zoom.js` 是一个自定义的脚本，那么它可能扩展了 `turn.js` 的功能，以实现在翻页过程中对页面进行缩放的效果。具体的功能和实现方式将取决于 `zoom.js` 的具体代码内容。 请注意，我的回答是...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值