建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

模拟书本翻页效果的JQuery插件turn.js

来源:易助科技网浏览量:10收藏

简介


Turn.js 是一个轻量级的 (15kb) html5页面的jQuery插件,用来创建类似书本和杂志翻页效果,支持触摸屏设备。Turn.js 支持硬件加速来让翻页效果更加平滑。可通过 API 来获取当前显示的页号,并提供选项来定制默认页号、加速器、阴影和延时。


模拟书本翻页效果的JQuery插件turn.js-示例图



使用


1.  引入 jquery.js 和 turn.js 文件


2.  HTML


<div id="magazine">
  <div style="background-image:url(images/01.jpg);"></div>
  <div style="background-image:url(images/02.jpg);"></div>
  <div style="background-image:url(images/03.jpg);"></div>
  <div style="background-image:url(images/04.jpg);"></div>
  <div style="background-image:url(images/05.jpg);"></div>
  <div style="background-image:url(images/06.jpg);"></div>
</div>


3.  调用


<script type="text/javascript">
  $('#magazine').turn({width: 612, height: 400, acceleration: true});
</script>



相关链接


官网地址 :http://www.turnjs.com/

在线演示地址:https://www.jq22.com/yanshi2534