Turn.js 实现翻书效果的学习与总结

JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备.Turn.js 支持硬件加速来让翻页效果更加平滑.可通过 API 来获取当前显示的页号,并提供选项来定制默认页号.加速器.阴影和延时. 图片展示: 兼容浏览器:IE6+/Firefox/Google Chrome官方链接:http://www.turnjs.com/JS下载:http://www.i

书籍图片随便找了个,有点难看,须要的自己替换个好看点的png格式图片 源代码下载:http://download.csdn.net/detail/sweetsuzyhyf/7604091 静态书架和js模拟翻书效果,布布扣,bubuko.com

今天用turn.js 做图书的翻页效果遇到问题: 图片路径总是出错 调了一天,总算调出来了 我用的thinkphp,其他的不知道是不是一样 两个地方要改动: 1.后台查出地址 注意的地方:1.地址要完全的 2.js要用json格式的数据 $more = M('File')->where(array('id'=>$id))->find(); $more1 = json_decode($more['more'],true); foreach($more1 as $k => $v){ /

Turn.js是一个内置的jQuery翻页插件 1 html中引入<script type="text/javascript" src="js/turn.js"></script> 2  创建html <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"

这不是我的项目里的内容,因为同事在Iphone移动端需要实现这种翻书效果,解析出来的文件的文字使用HTML写的,而iPhone移动端这种效果出现了一些BUG,很难解决,就考虑有JS写一个,然后用到移动端.所以我就看了一下,感觉挺有意思,就和大家分享一下: 在这里需要用到一个jquery的插件 turn.js   大家如果要看更多的内容可以去这个地址:http://www.oschina.net/news/33508/jquery-plugins-for-book-like-page-flip-e

本文为你带来15个非常实用的.实现类似翻书效果的jQuery插件,你可以很容易地整合到你的web应用中,提升用户体验. 1.  BookBlock BookBlock可以将任何内容(如图像.文本)创建为翻页效果,带有一个翻页导航,可用于创建小册子等组件. 阅读更多 / 演示 2.  imBookFlip 该插件允许你在iframe或页面中加载电子书,可以设置为在页面加载时开始翻书效果,也可以设置为手动点击时开始.还可以通过Sound Manager添加声音效果. 阅读更多 / 演示 3.  jF

注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本的意思是使用JS来控制的,点击一次之后使用setInterval去控制书页翻过去的动画,当书页翻转180°之后,清除掉setInterval,但当我连续点击,那之前没有翻转180°的书页将无法继续完成之前的动作,可以用清除setInterval的方式,但总感觉动画效果不好,当然还有其他解决办法,但突

上次对用HTML5实现翻书效果进行了试验,比较简单,这次做个升级版的吧 上次的问题: 1)翻书后原先的页面会成一个镜像 2)无法实现双面翻书. 3)翻页时明显感觉似乎有被遮挡的迹象. 这次的升级版本实现过程比较坎坷,主要因为工作比较忙,正好还要学车,每天回家都要陪孩子,只能在孩子睡着后去弄. 本版本主要解决了这些问题: 1)实现了双面的翻页效果 2)解决了翻页被遮挡的问题,我理解是因为三维空间,采用绝对定位,zIndex不够大导致被上层div遮挡. 源码请下载:http://download.c

代码: RootViewController.m #import "RootViewController.h" @interface RootViewController () @end @implementation RootViewController - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil { self = [super initWithNibName:nib