HTML5翻书效果(双面效果)

上次对用HTML5实现翻书效果进行了试验,比较简单,这次做个升级版的吧

上次的问题:

1)翻书后原先的页面会成一个镜像

2)无法实现双面翻书。

3)翻页时明显感觉似乎有被遮挡的迹象。

这次的升级版本实现过程比较坎坷,主要因为工作比较忙,正好还要学车,每天回家都要陪孩子,只能在孩子睡着后去弄。

本版本主要解决了这些问题:

1)实现了双面的翻页效果

2)解决了翻页被遮挡的问题,我理解是因为三维空间,采用绝对定位,zIndex不够大导致被上层div遮挡。

源码请下载:http://download.csdn.net/detail/aperson111/7681029

如果有任何问题请直接留言,欢迎讨论!

HTML5翻书效果(双面效果),布布扣,bubuko.com

时间: 2024-10-07 18:42:38

HTML5翻书效果(双面效果)的相关文章

15 个最佳 jQuery 翻书效果插件

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

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

我的项目4 实现Js 翻书效果

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

静态书架和js模拟翻书效果

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

基于CSS3新属性Animation及transform实现类似翻书效果

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

【代码笔记】翻书效果的实现

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

Andorid 翻书效果

本文内容 项目结构 环境 演示 参考资料 本文有三个演示: 简单翻书效果.翻下一页后,当前页不会消失. 翻书时的贝塞尔曲线.演示翻书时,贝塞尔曲线的路径. 完整翻书效果. 下载 Demo 项目结构 图 1 项目结构                                                                   图 2 程序主界面 环境 Windows 2008 R2 64 位 Eclipse ADT V22.6.2,Android 4.4.2(API 19)

Unity3d:megaFierstext(翻书效果插件)

附件中是一款翻书效果插件,由于附件上传大小限制,在下载完后,需要在megaFierstext_BHYF\Assets\Resources\Textures下添加图片精灵并修改属性为Texture,即可运行看效果.好多论坛上需要用币买,也减少了搜索时间,拿来就可以用. 源码Unity3d:megaFierstext(翻书效果插件)

翻书效果的实现

效果图: 代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. //初始化背景图 [self initBackgroundView]; } #pragma -mark -functions -(void)initBackgroundView { self.title=@"翻书效果的实现"; self.view.backgroundColor=[U