JQuery的turn.js实现翻书效果

前言:

hello大家好~好久没更博了……今天来和大家分享下JQ的turn.js,下面我先来简单介绍下我们今天的主角turn.js。

 

Turn.js是一个JavaScript库,它集合了HTML5的所有优点,可以使我们的内容看起来像一本书或杂志,有真实的翻阅的效果。

它使用HTML5和CSS3来执行效果,所以它可以在iOS设备(iPad,iPhone,iPod)和Android设备等触摸设备上很好地工作~
Turn.js具有比Flash内容拥有真实HTML内容的所有优势,除了感觉到本机内容(可选内容,没有第三方上下文菜单)之外,还可以添加广告代码,HTML5视频,工具提示,图像,地图,表单,跟踪每个页面并将它们与数百个精巧的库组合在一起用于网络。

 

***本文关键词:turn.js属性值,用法,demo代码(见附录,在文章最后哦~~)。

 

实现效果如下(静态图)

JQuery的turn.js实现翻书效果_第1张图片

 

官方示例代码:
html:

 1 <div id = “ flipbook” >
 2    <div class = “ hard” > Turn.js  div>
 3    <div class = “ hard” >  div>
 4    <div> 第1页  div>
 5    <div> 第2页 < / div>
 6    <div> 第3页  div>
 7    <div> 第4页  div>
 8    <div class = “ hard” >  div>
 9    <div class = “ hard” >  div>
10  div>

 

js:
第一步:记得要先引入JQ文件(1.3或更高版本才可以哦~~)
第二步:引入turn.js文件,可以到官网下载(官方地址:http://www.turnjs.com/)
第三步:接下来就可以用咱们的主角turn.js啦~~代码如下↓↓↓

1 
                    
                    

你可能感兴趣的:(JQuery的turn.js实现翻书效果)