适配移动端和PC端的翻书效果

首先，实现翻书效果我使用了turnjs，是一款非常好用的翻书效果插件。可以直接在百度搜索turnjis下载。也可已选择在我的github库下载。

其次，PC端和移动端屏幕的差异使得我们需要控制在PC端显示两页，在移动端显示一页，然后宽度和高度用js做适应即可。

turnjs使用头部需要引入的文件。然后固定格式的代码

 <link rel="stylesheet" href="css/common.css"><script src="js/jquery.min.1.7.js"></script><link rel="stylesheet" href="js/turnjs/css/basic.css">

<div class="flipbook-viewport"><div class="container"><div class="flipbook"><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
</div>

然后，js初始化就ok了。初始化的时候判断当前是否为移动端，然后执行不同的初始化。

<script type="text/javascript" src="js/turnjs/extras/modernizr.2.5.3.min.js"></script>
<script type="text/javascript" src="js/turnjs/lib/turn.min.js"></script>
<script>$(function(){//可以设置上一页  及 下一页 跳转指定页// Turn to the page 10//$("#flipbook").turn("page", 10);//$("#flipbook").turn("next");//$("#flipbook").turn("prev");function loadApp() {var w = $(window).width() - 40;var h = $(window).height() - 160;//判断是否是移动端if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {//书本初始化$('.flipbook').turn({width:w,height:h,//书本的大小direction:"ltr",//书本翻动方向elevation: 50, //在转换期间设置页面的标高。display:"single",//display("double"  "single")  展示一页或者两页，默认doubleduration:1000,// 设置翻页动画持续时间即翻页的快慢，默认600(毫秒)gradients: true,//翻页阴影acceleration:true,// 硬件加速，对于触摸设备，一定要设置trueautoCenter:false //是否居中 默认false});} else {//书本初始化$('.flipbook').turn({width:w,height:h,direction:"ltr",elevation: 50,display:"double",duration:1000,gradients: true});var $pages = $(".page");if($pages.length>0){for(var i=0;i<$pages.length;i++){$pages.eq(i).css("width",w/2);}}}}yepnope({test : Modernizr.csstransforms,// nope: ['js/turnjs/lib/turn.html4.min.js'],complete: loadApp});})
</script>

适配移动端和PC端的翻书效果相关推荐

html局部翻页效果,基于Turn.js 实现翻书效果实例解析
最近项目经理我个项目练练手,其项目需求是要实现翻书效果,看到这个需求后,我真是懵了,这咋整,我可是java出身的啊,这个问题真是难住我了,后来有同事的指导,之前他曾经做过PC版的翻书效果,当时使用的是 ...
Vue 移动端、PC 端适配
Vue 移动端.PC 端适配可以使用 lib-flexible.amfe-flexible.postcss-pxtorem.postcss-px2rem 和 postcss-px-to-viewpor ...
Android端与PC端同步绘画板(二)-适配手机和PC屏幕大小
前言关于手机端与PC端如何建立通讯,请参考: Android端与PC端同步绘画板(一)-使用Socket建立连接这篇文章我们来简单说一下关于手机端和PC端的屏幕适配问题,因为我们都知道因为Andr ...
移动端和PC端的pdf预览与下载
34.移动端和PC端的pdf的预览与下载 1.预览需求:在手机端实现pdf的文件与下载,主要是zlb_app中实现过程:在研究了vue-pdf.pdfjs.pdfh5之后,选择了vue-pdf-s ...
移动端与PC端设计的几项要点
一.移动端与PC端的区别 1.屏幕尺寸不同 PC端屏幕大,视觉范围更广,可设计的地方更多,设计性更强,相对来说容错度更高一些有一些小的问题不容易被发现.移动端设备相对来说屏幕较小,操作局限性大,在设计 ...
vuecli3 实现移动端和pc端界面切换（两套代码）
适合场景多页面多系统应用所有系统都在同一目录下.配置多入口多出口.每个系统之间可以链接.每个系统内依然采用Vue单页应用开发. 产品需求:一套代码兼容pc端和移动端 , 移动端和pc端的样式布局 ...
js判断移动端，pc端，安卓，苹果浏览器的方法
js 判断安卓或者ios 之indexOf方式(一) //判断访问终端 var browser={versions:function(){var u = navigator.userAgent, ap ...
360浏览器打不开网页_苹果移动端、PC端safari浏览器打不开网页的解决方案！
你还在为苹果自带的safari浏览器打不开网页而苦恼吗,接下来的答案会帮助你解决苦恼. 苹果自带safari浏览器的设备分为两种:移动端.PC端.因此不同设备出现safari浏览器打不开网页的情况需要 ...
js 判断移动端还是pc端，ios或者android
js 判断移动端还是pc端,ios或者android 法一: function IsPC(){ var userAgentInfo = navigator.userAgent;var Agents = ...

适配移动端和PC端的翻书效果

适配移动端和PC端的翻书效果相关推荐

最新文章

热门文章