书翻页turn.js踩的坑

用的例子在这里：https://www.jq22.com/jquery-info2534
如果英文好的也可以直接去官网看文档

最简单的使用方法就是直接替换里面的图片，然后分享一下遇到的坑：

会有底部导航栏

翻页时会改变地址栏，唤出微信自带的跳转页面出现的底部白色导航栏

与jq的一些动画：animate() 方法冲突

由翻书唤起的底部导航栏出现后，animate方法会与正常的有偏差，解决办法就是写css动画，然后用js增删class名

单双页

turn函数里面有一个display，single是单页，double是双页

修改页数

turn函数里面的pages

引入的js文件路径

在js里面最下面有一个yepnope({})，里面的文件路径是相对于html文件的（或者写绝对路径）

修改图片路径

需要修magazine.js里3个function ：loadPage+loadLargePage+loadSmallPage

双页直接跳到第二页

turn函数里面的page改变，如果不好使请看下一行
$(’.magazine’).turn(‘page’, 2);
如果再不好使就搜索下【.turn(‘page’,】，然后看看例子怎么写的跳转，可能会变一下前面的magazine

双页直接跳到第二页会出现翻页的过程，不想要这个过程

我没有找到屏蔽这个过程的方法
目前用的方法就是在翻书之前，就让它出现翻一下，这时候的opacity为0，再隐藏，opacity改回1。
等之后再显示这个页面的时候，就不会有第一遍翻页的那个过程了

取消点击放大效果

注释掉js里面的这几行就好了：

// if ($.isTouch)
// $(’.magazine-viewport’).bind(‘zoom.doubleTap’, zoomTo);
// else
// $(’.magazine-viewport’).bind(‘zoom.tap’, zoomTo);

缺少json文件

路径在magazine.js里面的loadRegions中更改，因为我不需要对应的json（虽然不知道里面是什么，但没有也可以正常运行），所以直接在loadPage函数里找到调用loadRegions那一行，注释掉就好了

背景图、箭头等图片路径

在magazine.css里面改变即可

书翻页turn.js踩的坑相关推荐

pdfjs 使用viewer 实现自动翻页（js控制）
pdfjs 使用viewer 实现自动翻页使用js控制自动翻页 //获取嵌入在iframe中的子页面的window对象var childWindow = $("#myFrame" ...
Android_Page Curl：Android平台上的翻书翻页
Android_Page Curl:Android平台上的翻书翻页我在之前介绍了一种Android平台上的翻书翻页第三方开源实现,参见附录文章1.现在再介绍一篇第三方开源的翻书翻页开源实现An ...
VUE翻书效果（turn.js，仿真折角过渡）
1.效果图 2.turn.js下载 http://www.turnjs.com/http://www.turnjs.com/ 3.安装JQ turn.js依赖JQ库,安装JQ,vue工程安装JQ np ...
爬取的网页翻页是js的(构造post请求，ajax 异步刷新的, 只抓ajax调用的接口就行)，然后保存固定格式
import requests import json from lxml import etree import time''' 注意,河北省博物馆这个网站.从第二页开始是这样匹配的replys = ...
html相册翻页效果图,js实现相册翻页，滚动，切换，轮播功能
在完成web图片各种功能上,很多框架有很绚丽的效果,但今天我们来看看用原生的js如何简单的实现这些功能.欢迎大家交流指正. 1.相册左右点击翻页功能实现步骤 1.需要一个HTML标签img,添加一张 ...
Android翻书翻页(支持硬翻软翻)
有一次公司有个需求,要求做翻页效果,支持硬翻和软翻,发现网上根本没有一个支持硬翻,软翻也没有几个效果好的,楼主就自己实现了一下. 软翻页是修改Harism/android_page_curl ,这个软 ...
书翻页效果php,Css实现翻书效果
如何实现翻书效果在一些小说站中经常应用,其实实现起来也很简单,下面是用div+css 实现翻书效果. body{ overflow: hidden; margin: 0; padding: 0; } ...
可以左右翻页的JS相册效果
在线浏览代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
翻页插件turn.js
老实说翻页turn.js里面的坑非常多,记得那时候项目中踩了几天都踩不完.个人建议谨慎使用下面就介绍一下最简单的入门吧~ 1.引入文件部分(注意必须要引入jQ,turn.js文件可以上网找,mode ...

书翻页turn.js踩的坑

书翻页turn.js踩的坑相关推荐

最新文章

热门文章