使用插件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. unity，荧光效果（bloom）实现过程

    两个月前,刚接触unity的时候费了半天劲儿做了个荧光效果(见:http://www.cnblogs.com/wantnon/p/4430749.html),今天终于抽空整理了一下,把过程写下来. 荧 ...

  2. 广告狂人第一至七季/全集Mad Men迅雷下载

    广告狂人 第一季 Mad Men Season 1 (2007) 本季看点:你是谁?你想要什么?你爱乾什么?这些都不重要,重要的是你怎么把东西卖出去.凡是了解纽约的人都知道,今天,在麦迪逊大道(Mad ...

  3. 获取客户端网卡MAC地址和IP地址实现JS代码

    获取客户端网卡MAC地址和IP地址实现JS代码 作者: 字体:[增加 减小] 类型:转载   获取客户端的一些信息,如IP和MAC,以结合身份验证,相信很多人都会这样做吧,我们这里用Javascrip ...

  4. SVG 相关整理

    1. 中文参考手册: http://www.runoob.com/svg/svg-reference.html SVG HTML5 资源教程 http://www.html5tricks.com/ta ...

  5. Asp.netMVC中Html.Partial,RenderPartial,Action,RenderAction区别和用法

    https://www.2cto.com/kf/201702/602449.html Partial 和RenderPartial: 这两个的性质都是一样, 只指把一个个View给镶入进来, 只是回传 ...

  6. matlib实现logistic回归算法(序一)

    数据下载:http://archive.ics.uci.edu/ml/datasets/Adult 数据描述:http://archive.ics.uci.edu/ml/machine-learnin ...

  7. 6.2 dubbo在spring中自定义xml标签源码解析

    在6.1 如何在spring中自定义xml标签中我们看到了在spring中自定义xml标签的方式.dubbo也是这样来实现的. 一 META_INF/dubbo.xsd 比较长,只列出<dubb ...

  8. DevExpress ChartControl 柱状图的使用【转】

    //中心业务平台的“热门岗位信息监测”柱状图 public partial class HotJobInfo : UserControl     {         private object _o ...

  9. 引用外部jquery.js

    使用 Google 的 CDN <head> <script type="text/javascript" src="http://ajax.googl ...

  10. android动手写控件系列——老猪叫你写相机

    前记:Android这个开源而自由的系统,为我们带来开发便利,同时也埋下太多的深坑.例如调用系统自带的相机就会出现照片丢失,或者其他各种各样的问题.因此,看来自定义一个相机十分的必要. 要自定义相机我 ...