怎么用jQuery插件Turn.js实现移动端电子书翻页效果

云天博客 • 02/25 10:12 • 开发 • 阅读 74

本篇内容主要讲解“怎么用jQuery插件Turn.js实现移动端电子书翻页效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用jQuery插件Turn.js实现移动端电子书翻页效果”吧!先来看一下效果：它是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果，支持触摸屏设备。Turn.js 支持硬件加速来让翻页效果更加平滑。特征：适用于 iPad 和 iPhone。简单、美观且功能强大的 API。允许通过 Ajax 请求动态加载页面。纯 HTML5/CSS3 内容。两种过渡效果。适用于旧浏览器，例如带有 turn.html4.js 的 IE 8Turn.js依赖于jQuery,首先script标签引入jQuery，和turn.js，jQuery 要求 1.3 或更高版本。turn.js 可前往官网下载

创建一个容器元素和一些代表页码的子元素，为其设置合适的宽高，随便输入一点内容


$('#flipbook').turn({
acceleration:true,//是否启动硬件加速如果为触摸设备必须为true
pages:11,//页码总数
elevation:50,//转换期间页面的高度
width:300,//宽度单位px
height:800,//高度单位px
gradients:true,//是否显示翻页阴影效果
display:'single',//设置单页还是双页
when:{
	//翻页前触发
	turning:function(e,page,view){
	
	},
	//翻页后触发
	turned:function(e,page){
				
}
}
});

这样就可以实现基本的翻页效果了项目有30p，每一p都对应一张图片，一页一页搭建实在太慢了，用js创建封装一个turn.js基本配置的函数，根据api实现自己的翻页效果一进来调用创建函数，构建页面，判断当前浏览器环境是否支持 csstransforms 特性，支持调用 turn.js 调用完毕后执行 turn.js 基本配置函数项目中用到两个js插件简单介绍一下传统浏览器目前不会被完全取代，令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生，作为一个开源的 JavaScript 库，Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况。yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本，可以在页面上仅加载用户需要的js/css。到此，相信大家对“怎么用jQuery插件Turn.js实现移动端电子书翻页效果”有了更深的了解，不妨来实际操作一番吧！这里是百云主免费云主机域名机网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: C语言动态内存管理malloc函数怎么使用

这篇文章主要讲解了“C语言动态内存管理malloc函数怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“C语言动态内存管理malloc函数怎么使用”吧！我们已经掌握的内存开辟方式有：但是上述的开辟空间的方式…