js常用插件(九)之移动端翻书效果turn.js

js常用插件之turn.js—modernizr翻书效果

欢迎点击: 个人官网博客

首先引入必要的三个文件

    <link rel="stylesheet" href="./css/basic.css"><script src="./js/modernizr.2.5.3.min.js"></script><script src="./js/turn.js"></script>

turn.js
modernizr.2.5.3.min.js
basic.css

先上效果图:

核心代码:

<div class="flipbook-viewport"><div class="container"><div class="flipbook"><!-- 首页 --><div id="first"></div><!-- 中间页，可多张 --><div></div><!-- 尾页 --><div id="end"></div></div></div>
</div>

     //初始化翻页function init() {var w = $(window).width();var h = $(window).height();$(window).resize(function () {w = $(window).width();h = $(window).height();$('.flipboox').width(w).height(h);});$(".flipbook").turn({width: w,height: h,autoCenter: true,display: 'single',acceleration: true,duration: 300,gradients: true,elevation: 50,when: {turning: function (event, page, pageObject) {if (page == 1) {//禁止翻页return false}},turned: function (e, page, view) {}}});}

js常用插件(九)之移动端翻书效果turn.js相关推荐

js常用插件(二)之移动端手势利器hammer单双指操作
js常用插件之hammer单双指操作欢迎点击: 个人官网博客移动端手势利器: 先引用cdn或自己下载下来 <script src="https://cdn.bootcdn.net/ ...
在线电子书翻页效果 Turn.js
1 html中引入 <script type="text/javascript" src="js/turn.js"></script> ...
ajax实现翻书效果,jquery实现的翻书效果
插件描述:利用jquery插件实现的类似图书翻书效果功能 Booklet是一个基于jQuery库的实现网页上翻书动画效果的插件,在jBooklet页面上可以写任何支持html的内容,而软件设置相当简单 ...
js常用插件(三)之html2canvas生成海报
js常用插件之html2canvas截图生成海报欢迎点击: 个人官网博客先引用cdn或自己下载下来 <script src="https://cdn.bootcdn.net/aja ...
js常用插件(七)之conversion压缩图片(不改变图片尺寸大小)
js常用插件之conversion压缩图片(重点:不改变尺寸大小) 欢迎点击: 个人官网博客图片压缩只是他的一种功能,更多可以查看官方文档重点:压缩体积并且图片尺寸大小是不变的用法很简单: &l ...
适配移动端和PC端的翻书效果
首先,实现翻书效果我使用了turnjs,是一款非常好用的翻书效果插件.可以直接在百度搜索turnjis下载.也可已选择在我的github库下载. 其次,PC端和移动端屏幕的差异使得我们需要控制在PC端 ...
使用JQuery的turn.js库来实现翻书效果
一淘模板(56admin.com)本篇文章给大家介绍jQuery的turn.js库,聊聊使用turn.js库实现翻书效果,希望对大家有所帮助! 今天来和大家分享下JQ的turn.js,下面我先来简单介 ...
VUE翻书效果（turn.js，仿真折角过渡）
1.效果图 2.turn.js下载 http://www.turnjs.com/http://www.turnjs.com/ 3.安装JQ turn.js依赖JQ库,安装JQ,vue工程安装JQ np ...
turn.js 翻书效果
turn.js 实现翻书效果,自适应pc端.手机端.ipad,可以左右滑动翻页 <!doctype html> <!--[if lt IE 7 ]> <html lang ...

js常用插件(九)之移动端翻书效果turn.js

js常用插件之turn.js—modernizr翻书效果

js常用插件(九)之移动端翻书效果turn.js相关推荐

最新文章

热门文章