2024年3月30日发(作者：)

图书资源阅览之

web网页上TXT电子书阅览翻页效果展示研究

基于unity3d 可以很好的跟网页进行相互传递消息，故选择在web网页上先实现txt

电子书翻页效果阅览，以供后续整合使用。

一、 web网页上翻页效果txt电子书实现主要涉及的内容和应用的技术有：

html、css、js脚本语言（网页中主要代码以js实现，其中关键的分页技术中应用了

js正则表达式进行准确划分）、jquery（js的一个类库，方便的对网页文档对象进行访问、

设置css样式、点击以及鼠标事件等系列事件的处理、网页元素的动态效果实现等）。

二、 web网页上翻页效果实现原理：

借鉴于网络上已有的一个实现卷页的原理（只是动画用的是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层次高于trigger div层次和显示内容区域层次，但display值为none，所以默认是不

显示的，不会阻隔trigger div感应鼠标事件。如下图(红色区域为鼠标事件感应区，橙色

区域为卷页效果区）：

以右下角翻页为例（翻至下一页）。当鼠标进入trigger div区域，pagepeel div display

值变为block显示出来，并通过jquery的animate对pagepeel div的宽、高和左上角的

绝对位置进行动态改变，形似卷起开始遮挡住内容区域部分内容。鼠标离开后则pagepeel

div display值变为none不显示。如下图：