当前位置：首页> web网页txt电子书阅读实现技术文档 (1)

web网页txt电子书阅读实现技术文档 (1)

时间：2023-02-25 14:01:04 下载该word文档

百度文库-让每个人平等地提升自我！

图书资源阅览之
web网页上TXT电子书阅览翻页效果展示研究
基于unity3d可以很好的跟网页进行相互传递消息，故选择在web网页上先实现txt电子书翻页效果阅览，以供后续整合使用。
一、web网页上翻页效果
txt电子书实现主要涉及的内容和应用的
技术有：
html、css、js脚本语言（网页中主要代码以js实现，其中关键的分页技术中应用了js正则表达式进行准确划分）、jquery（js的一个类库，方便的对网页文档对象进行访问、设置css样式、点击以及鼠标事件等系列事件的处理、网页元素的动态效果实现等）。二、web
网页上翻页效果实现原理：
借鉴于网络上已有的一个jQuery.pagePeel.js实现卷页的原理（只是动画用的是flash组件）。与unity3d类比，网页document对象的window对象类似于unity3d的摄像机视野窗口。unity3d的GUI系统是二维的，在垂直于窗口的方向上有z-index值对不同纵深的GUI组件进行分层排布。而网页上的div等元素对象的排布显示同样是通过z-index来控制的。以左右两个div来作为当前左右页显示区域，默认z-index为0，在左区域的左下角和右区域的右下角各有两个不同z-index的div，一个div（id为trigger）默认style为z-index=1层次高于显示内容区域，display为block用来响应鼠标的进入和离开事件；另一个div（id为pagepeel）用来包含表示卷页效果的图片，默认情况下该div的z-index=10层次高于triggerdiv层次和显示内容区域层次，但display值为none，所以默认是不显示的，不会阻隔triggerdiv感应鼠标事件。如下图(红色区域为鼠标事件感应区，橙色区域为卷页效果区）：
1

百度文库-让每个人平等地提升自我！

以右下角翻页为例（翻至下一页）。当鼠标进入triggerdiv区域，pagepeeldivdisplay值变为block显示出来，并通过jquery的animate对pagepeeldiv的宽、高和左上角的绝对位置进行动态改变，形似卷起开始遮挡住内容区域部分内容。鼠标离开后则pagepeeldivdisplay值变为none不显示。如下图：
2

阅读全文