使用插件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. GO -- 正则表达式

    str := "880218end" match, _ := regexp.MatchString("\\d{16}", str) //六位连续的数字 fmt. ...

  2. Python中的文件IO操作（读写文件、追加文件）

    Python中文件的读写包含三个步骤:打开文件,读/写文件,关闭文件. 文件打开之后必须关闭,因为在磁盘上读写文件的功能是由操作系统提供的,文件作为对象,被打开后会占用操作系统的资源,而操作系统在同一 ...

  3. 美国谍梦第一季/全集The Americans迅雷下载

    美国谍梦 第一季 The Americans Season 1 (2013)本季看点:这部背景设在80年代的剧集,故事讲述了一对被组织安排在美国生活的克格勃特工夫妻Phillip和Elizabeth, ...

  4. Android Studio 下载地址

    下载地址:https://developer.android.com/sdk/index.html#download      这个网址可以下载需要的东西,FQ的话可以给 xifulinmen@gma ...

  5. [转]Linux常用命令大全

    From : http://www.php100.com/html/webkaifa/Linux/2009/1106/3485.html 系统信息 arch 显示机器的处理器架构(1) uname - ...

  6. go语言之进阶篇并行和并发的区别与go语言并发优势

    1.并行和并发的概念 并行(parallel):指在同一时刻,有多条指令在多个处理器上同时执行. 并发(concurrency):指在同一时刻只能有一条指令执行,但多个进程指令被快速的轮换执行,使得在 ...

  7. tensorflow 之tf.nn.depthwise_conv2d and separable_conv2d实现及原理

    Depthwise Separable Convolution 1.简介 Depthwise Separable Convolution 是谷歌公司于2017年的CVPR中在论文”Xception: ...

  8. CSS-设置Footer始终在页面底部

    Footer顾名思义页脚,如果内容多的时候在底部时感官很好,但是当内容变少(无法撑开一屏的时候)footer不固定在底部,影响美观,对于已经从事前端工作的工作的来说应该是比价工作中入门级别的问题了,由 ...

  9. Regular Expression Matching leetcode java

    题目: Implement regular expression matching with support for '.' and '*'. '.' Matches any single chara ...

  10. Hadoop家族学习路线图v

    主要介绍Hadoop家族产品,常用的项目包括Hadoop, Hive, Pig, HBase, Sqoop, Mahout, Zookeeper, Avro, Ambari, Chukwa,新增加的项 ...