使用插件turn.js实现翻书功能。

看下效果：http://yk.wanxue.cn/2019/01/yd/

当然第一版做的时候加载很慢很慢，原版插件会把所有图片加载出来再显示页面。很不爽的体验就改了插件。

代码在：https://github.com/ljt1018168/myTurn.js

插件官网：http://turnjs.com/

参考部分代码：https://blog.csdn.net/kenhins/article/details/83650377

 

文章来源：刘俊涛的博客

欢迎关注，有问题一起学习欢迎留言、评论

翻页效果实现turn.js的更多相关文章

  1. turn.js 图书翻页效果

    今天用turn.js 做图书的翻页效果遇到问题: 图片路径总是出错 调了一天,总算调出来了 我用的thinkphp,其他的不知道是不是一样 三 个地方要改动: 1.后台查出地址 注意的地方:1.地址要 ...

  2. turn.js中文API 写一个翻页效果的参数详细解释

    $('.flipbook').turn({     width: 922,     height: 600,     elevation: 50,     gradients: true,     a ...

  3. javascript移动端 电子书 翻页效果

    1.后端给一长串的纯文本 2.前端根据屏幕的高度,将文本切割为 n 页 3.使用插件 turn.js 将切割好的每页,加上翻书效果 <!DOCTYPE html> <html lan ...

  4. webapp应用--模拟电子书翻页效果

    前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...

  5. ajax翻页效果模仿yii框架

    ajax翻页效果,模仿yii框架. 复制代码代码如下: <!DOCTYPE html>  <html>  <head>  <title>ajax分页_w ...

  6. 纯css3写的仿真图书翻页效果

    对css3研究越深入,越觉得惊艳.css3说不上是万能的,但是它能实现的效果也超出了我的想象.它的高效率和动画效果的流畅性很多情况下能替代js的作用.个人习惯css3能实现的效果就不会用js,虽然在国 ...

  7. CSS3-----图片翻页效果的展示

    在开发一个网站的过程中各种翻页效果数不胜数,在这里我将介绍一下简单的一种方法就是使用css3的旋转即可实现这种常见的效果: 显示效果如下: 首先是页面的布局,不用那么复杂; a标签的href属性,一般 ...

  8. HTML多图无缝循环翻页效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 微信里经常看到的滑动翻页效果，slide

    上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔. 1.demo1,整个大 ...

随机推荐

  1. Quartz：不要重复造轮子，一款企业级任务调度框架。

    背景 第一次遇到定时执行某些任务的需求时,很多朋友可能设计了一个小类库,这个类图提高了一个接口,然后由调度器调度所有注册的接口类型,我就是其中之一,随着接触的开源项目越来越多,我的某些开发习惯受到了影 ...

  2. python测试开发django-40.模型(model)中choices使用

    前言 之前一直在想页面上如果一个字段只有固定的几个选项,类似select下拉框这种,如果在表里面设置一个外键的话,是不是有点傻了,这样为了几个选项弄一张表不值得. 后来看到Django模型中的字段有个 ...

  3. SqlServer 查看备份文件中逻辑文件信息的Sql语句

    RESTORE FILELISTONLY FROM DISK = 'D:\All\DataBase\(2013-12-18)-1.bak' 用来查看备份文件中的逻辑文件信息. 相关信息:SqlServ ...

  4. JDK配置 linux

    在启动终端并输入 gedit /etc/profile 在末尾添加一下配置,保存并退出 #set jdk environment export JAVA_HOME=/usr/lib/jvm/jdk1. ...

  5. 解决Installation error: INSTALL_FAILED_VERSION_DOWNGRADE错误

    Installation error: INSTALL_FAILED_VERSION_DOWNGRADE 说明你手机里已经装的软件版本比你要安装的软件版本要高,所以不能安装. 你只要删除你安装的应用便 ...

  6. Tmux教程

    常用命令如下: (Ctrl+B) + (Shift+5) 打开一个新窗口 (Ctrl+B) + right/left 在不同窗口之间切换 (Ctrl+B) + [ 或 ] 进入复制模式,查看历史记录 ...

  7. Web用户的身份验证及WebApi权限验证流程的设计和实现 asp.net mvc AllowAnonymous 不起作用, asp.net mvc 匿名访问

    原文地址: https://blog.csdn.net/zjlovety/article/details/17095627 前言:Web 用户的身份验证,及页面操作权限验证是B/S系统的基础功能,一个 ...

  8. ASP.NET MVC：WebPageBase.cs

    ylbtech-funcation-Utility: ASP.NET MVC:WebPageBase.cs 充当表示 ASP.NET Razor 页的类的基类. 1.A,WebPageBase 抽象类 ...

  9. 【Error】centos7 minimal connect： Network is unreachable

    参考链接:http://www.centoscn.com/CentosBug/osbug/2015/1208/6500.html 由于centos7 和之前的版本差异比较大,之前的一些命令不能完全使用 ...

  10. Could not load file or assembly 'System.Data.SQLite' or one of its dependencies. An attempt was made to load a program

    今天同事在一个服务器(winserver 2008 x64)上新建了一个IIS(7) 网站,但是报了如下错误: Could not load file or assembly 'System.Data ...