要想在ipad等上做翻书的效果?以前看起来比较麻烦,现在就简单多了,
强烈推荐一个叫turn.js的效果,网站在http://www.turnjs.com
,使用起来很简单,另外有一篇不错的教程,是jquery+turn.js+php的,用来获得在
Instagram上的图片,地址在:
http://tutorialzine.com/2012/03/instagram-magazine-php-jquery/
下面简单小结下turn.js的用法,
<div id="magazine" class="centerStart">
</div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="assets/js/turn.js"></script>
这里,只需要要显示的层的ID命名为magzine即可,然后用PHP读数据库,生成相关的页面图片如下
<div id="magazine" class="centerStart">
<div id="page1" class="page">
<div class="img1">
<span class="pageNum right">1 // 32</span>
[img]assets/img/cover.jpg" alt="Cover[/img]
</div>
</div>
..........................
</div>
相关的CSS:
#magazine{
width:800px;
height:400px;
}
#magazine .turn-page{
width:400px;
height:400px;
background-color:#ccc;
}
然后jquery中调用:
$(function(){
var mag = $('#magazine');
//调用插件的turn方法
mag.turn();
mag.bind('turned', function(e, page, pageObj) {
if(page == 1 && $(this).data('done')){
//如果是首页,可以进行一些样式的设计
mag.addClass('centerStart').removeClass('centerEnd');
}
//如果是封底,进行一些样式的设计
else if (page == 32 && $(this).data('done')){
mag.addClass('centerEnd').removeClass('centerStart');
}
else {
mag.removeClass('centerStart centerEnd');
}
});
setTimeout(function(){
mag.fadeTo(500,1);
},1000);
//控制当使用键盘的前后键,也可以进行控制
$(window).bind('keydown', function(e){
// listen for arrow keys
if (e.keyCode == 37){
mag.turn('previous');
}
else if (e.keyCode==39){
mag.turn('next');
}
});
});
分享到:
相关推荐
Turn.js 是一个强大的JavaScript库,专门用于在网页上创建具有真实翻页效果的电子书或杂志样式的内容。这个插件利用HTML、CSS和JavaScript技术,为用户提供了类似于真实纸质书籍的交互体验,使得数字内容更加生动...
Turn.js 是一个基于 jQuery 的库,它为网页内容提供了优雅的、类似真实杂志的翻页效果。这个插件使得开发者可以轻松地将 HTML 内容转化为互动式的电子书、杂志或者画册,提供了丰富的定制选项以满足不同设计需求。...
Turn.js 是一个强大的JavaScript库,专门用于为网页添加翻书效果。这个库使得开发者能够将普通的HTML内容转化为具有逼真翻页动画的互动电子书,适用于创建电子杂志、电子手册或者像标题中提到的企业宣传册。Turn.js ...
Turn.js 是一款强大的JavaScript插件,专为创建模拟真实书本翻页效果而设计。它提供了高度自定义的选项,可以轻松地将静态HTML内容转化为互动式的电子书、杂志或手册,无论是桌面还是移动设备都能提供流畅的用户体验...
总之,Turn.js是一个强大且灵活的工具,可以帮助开发者轻松实现HTML5的翻书效果。通过掌握其基本用法和API,你可以创建出富有吸引力的电子杂志或图书应用,提供给用户沉浸式的阅读体验。在实际工作中,结合其他前端...
总的来说,Turn.js是一个强大的jQuery插件,它为网页设计师提供了一种简单的方式,用以创建具有实体书翻页体验的数字出版物,从而提升用户的浏览体验。通过深入理解和实践,你可以利用Turn.js创造出各种富有创意的...
Turn.js 是一个强大的JavaScript库,专门用于在网页上创建具有真实感的书籍翻页效果。这个库使得开发者能够轻松地将HTML内容转化为可交互的、类似电子书的体验,为用户带来富有动态视觉效果的阅读体验。在描述中提到...
这种翻页效果通常基于HTML5的Canvas或SVG元素,以及JavaScript库如jQuery或更专业的图书展示框架,如Turn.js、Book.js等。Canvas提供了一个画布,开发者可以在这个画布上绘制动态的翻页动画,而SVG则用于矢量图形,...
Turn.js 是一个轻量级的插件,通常与 jQuery 用创建类似书本和杂志翻页效果,支持触摸屏设备。
5. **插件**:描述中提到的"基于插件实现",可能指的是一个特定的JavaScript插件,如turn.js或bookblock.js等,这些插件专门设计用于创建3D翻页效果,可以减少从零开始实现此类功能的工作量。 6. **响应式设计**:...
它利用了Turn.js库,一个专门用于创建3D翻页效果的JavaScript插件,使得网页上的内容可以像真实的纸质书一样翻动。 Turn.js是一个轻量级且功能强大的库,它通过CSS3技术和JavaScript实现了逼真的书页翻转效果。它...
Turn.js是一个轻量级的库,主要用于创建具有翻页效果的数字杂志、电子书或者任何需要类似翻页体验的网页应用。它通过CSS3技术和JavaScript实现了逼真的3D翻页效果,使得静态的HTML内容能够模拟出纸质书籍的动态翻页...
`pdf.js` 是 Mozilla 开源的一个JavaScript库,用于在浏览器环境中加载和渲染PDF文档,而 `turn.js` 是一个流行的翻页效果插件,常用于模拟真实的图书翻页效果。 **pdf.js** `pdf.js` 的核心功能是将PDF文件解析...
"html5翻书效果"就是其中一个引人注目的特性,它利用HTML5的Canvas或SVG元素,以及JavaScript库来模拟真实的图书翻页动画,给用户带来如同阅读纸质书一样的感觉。 在HTML5中,实现翻书效果通常涉及到以下几个关键...
Turn.js 是一个强大的JavaScript库,专门用于为网页创建模拟真实纸质书籍翻页效果的电子书。这个库使得网页上的内容可以以优雅的翻页动画形式展示,为用户提供了一种沉浸式的阅读体验。Turn.js 支持多种设备和浏览器...
1. 使用插件:有许多开源的H5翻页插件,如Turn.js、BookBlock等,它们提供了现成的解决方案,只需简单配置即可实现满屏翻页效果。 2. 自定义开发:对于有特定需求的项目,可以选择自定义开发。这需要对CSS3和...
**turn.js** 是一个专门用于创建翻书效果的JavaScript库,它模拟了真实的图书翻页动画,使PDF预览更具互动性和吸引力。Turn.js支持HTML5的canvas和CSS3,可以为PDF文档添加动态翻页效果,提升用户的阅读体验。然而,...
在本主题中,我们将深入探讨如何利用这两项技术实现一个逼真的翻书效果,具体是通过一个名为Turn.js的插件来实现。 Turn.js是一个功能强大的JavaScript库,专门设计用于在网页上模拟真实的图书翻页效果。这个插件...
本文将详细阐述如何使用Vue.js实现一个简易的翻页效果。通过分析给定的源码,我们将学习Vue的基础用法,事件处理,以及如何通过计算属性来实现分页逻辑。以下为知识点的详细介绍: #### Vue.js基础 1. **Vue实例的...