使用插件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. HTML5学习笔记：跨域

    在跨域安全性方面,有多个地方会有限制,主要是XMLHttpRequest对象的跨域限制和iFrame的跨域限制,下面我们分别来看一下. Ajax跨域(CORS) CORS是一个W3C标准,全称是&qu ...

  2. 每天一个linux命令-lsof -i :port命令

    使用lsof -i :port就能看见所指定端口运行的程序,同时还有当前连接. losf -i:port | wc -l,统计端口连接数

  3. ios成长之每日一遍(day 5)

    iOS 屏幕方向那点事儿http://zhenby.com/blog/2013/08/20/talk-ios-orientation/ 针对当前的屏幕方向进行对应的代码布局 BIDViewContro ...

  4. 2016 移动应用质量大数据报告--转自腾讯Bugly

    2016年,在“互联网+”战略的推动下,移动互联网与越来越多传统行业的结合更加紧密,用户使用移动互联网的工作场景.生活场景.消费场景都在悄然发生着改变, 移动互联网产品在智能硬件.医疗.汽车.旅游.教 ...

  5. 你真的懂Handler.postDelayed()的原理吗?

    转载自http://www.dss886.com/2016/08/17/01/   阅读之前先问大家一个问题:Handler.postDelayed()是先delay一定的时间,然后再放入messag ...

  6. 实用ExtJS教程100例-003：进度条对话框Ext.MessageBox.progress

    在上一篇内容中我们介绍了三种常用的MessageBox提示框,在这篇文章中,我们将演示如何在对话框中使用进度条. 进度条对话框 我们可以使用下面的代码来在MessageBox中显示一个进度条: Ext ...

  7. 我的Java学习推荐书目

    一直有这么个想法,列一下我个人认为在学习和使用Java过程中可以推荐一读的书籍,给初学者或者想深入的朋友一些建议,帮助成长.推荐的的都是我自己读过,也会推荐一些朋友读过并且口碑不错的书籍. 一.基础类 ...

  8. c++ 使用json的库。cJSON

    cJSON官网是:http://sourceforge.net/projects/cjson/?source=recommended 最新版本是2013年的,与2009年的变化不是很大. 看了代码,觉 ...

  9. DLL文件实现窗体的模板模式

    机房合作版中第一次使用了模板方法,实现了类似窗体的界面和代码的复用..窗体继承有两种方法,一种是通过继承选择器从已编译的程序集合里选择,另一种则是通过DLL文件的方式继承.个人觉得DLL还是比较方便的 ...

  10. 关于微软C#中的CHART图表控件的简单使用【转】

    最近公司项目要用到Chart图表控件,这是一个比较老的东西了,目前网络上似乎已经不太流行这个控件,但是只要配置了相关的属性,效果还是可以的.前前后后摸索了好久,接下来谈谈这个件控件最重要的几个属性. ...