使用插件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. spring4 quartz2 集群动态任务

    实现定时任务的执行,而且要求定时周期是不固定的.测试地址:http://sms.reyo.cn 生产环境:nginx+tomcat+quartz2.2.1+spring4.2.1 集群. 实现功能:可 ...

  2. C#设置有命令空间的属性

    之前被问到一个问题,C#中如何设置android:name这样的属性?我的第一反应是直接setAttribute不就可以了么 SetAttribute(name, value), 可事实上却不行,因为 ...

  3. scriptcs简介

    一.scriptcs简介 scriptcs易于编写和执行C #用一个简单的文本编辑器. 在Visual Studio中,和其他的思想,是功能强大的工具,他们有时会阻碍生产力比他们更促进它. 您并不总是 ...

  4. TensorFlow的离线安装

    主要通过whl方式进行配置. 1.1          Whl文件下载地址: https://www.lfd.uci.edu/~gohlke/pythonlibs/ 注意:必须安装numpy-mkl, ...

  5. [转]PHP 真正多线程的使用

    From : http://blog.s135.com/pthreads/ PHP 5.3 以上版本,使用pthreads PHP扩展,可以使PHP真正地支持多线程.多线程在处理重复性的循环任务,能够 ...

  6. 【ContestHunter】【弱省胡策】【Round8】

    平衡树维护凸壳/三角函数+递推+线段树 官方题解:http://pan.baidu.com/s/1sjQbY8H 洛阳城里春光好 题目大意:(其实出题人已经写的很简短了……直接copy的-_-.sor ...

  7. jvm垃圾回收原理（转）

    原文链接:jvm垃圾回收原理 在jvm中堆空间划分为三个代:年轻代(Young Generation).年老代(Old Generation)和永久代(Permanent Generation).年轻 ...

  8. verilog语法实例学习(9)

    常用的时序电路介绍 寄存器 一个触发器可以存储一位数据,由n个触发器组成的电路可以存储n位数据,我们把这一组触发器叫做寄存器.寄存器中每个触发器共用同一个时钟. 下面是n位寄存器的代码,我们通过一个参 ...

  9. C/C++ 指针函数 与 函数指针

    指针函数是个函数,是返回指针类型到函数. 函数指针是个指针,是指向函数地址到指针. 区分两者的关键点是,函数名是否用*和括号“包围”起来. #include <stdio.h> int * ...

  10. spring boot整合mybatis+mybatis-plus

    Spring boot对于我来说是一个刚接触的新东西,学习过程中,发现这东西还是很容易上手的,Spring boot没配置时会默认使用Spring data jpa,这东西可以说一个极简洁的工具,可是 ...