资源描述：
《web网页txt电子书阅读实现技术文档》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、图书资源阅览之web网页上TXT电子书阅览翻页效果展示研究基于unity3d可以很好的跟网页进行相互传递消息，故选择在web网页上先实现txt电子书翻页效果阅览，以供后续整合使用。一、web网页上翻页效果txt电子书实现主要涉及的内容和应用的技术有：html、css、js脚本语言（网页中主要代码以js实现，其中关键的分页技术中应用了js正则表达式进行准确划分）、jquery（js的一个类库，方便的对网页文档对象进行访问、设置css样式、点击以及鼠标事件等系列事件的处理、网页元素的动态效果实现等）。二、web网页上翻页效果实现原理：借鉴于网络上
2、已有的一个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）默认
3、style为z-index=1层次高于显示内容区域，display为block用来响应鼠标的进入和离开事件；另一个div（id为pagepeel）用来包含表示卷页效果的图片，默认情况下该div的z-index=10层次高于triggerdiv层次和显示内容区域层次，但display值为none，所以默认是不显示的，不会阻隔triggerdiv感应鼠标事件。如下图(红色区域为鼠标事件感应区，橙色区域为卷页效果区）：以右下角翻页为例（翻至下一页）。当鼠标进入triggerdiv区域，pagepeeldivdisplay值变为block显示出来，并
4、通过jquery的animate对pagepeeldiv的宽、高和左上角的绝对位置进行动态改变，形似卷起开始遮挡住内容区域部分内容。鼠标离开后则pagepeeldivdisplay值变为none不显示。如下图：当在卷角处点击鼠标时，通过过jquery的animate使卷角区域向左上角变的更大，中途换掉pagepeel图片为实际的书页即将被翻过的状态图片，然后开始改变当前页码值重新显示左右两个区域的内容。如下图（状态图片等待修改）：三、分页及翻页技术具体实现如下：1）左右内容显示区、鼠标感应区、卷页显示区等区域定位：$("#contentAre
5、aLeft").css({"position":"absolute","width":contentAreaWidth,"height":contentAreaHeight,"left":contentAreaLeft_left,"top":contentAreatop,"color":"#77ff00","font-size":font_size,"line-height":line_height,"background-color":"#777777","font-family":"幼圆"});$("#contentAreaRight")
6、.css({"position":"absolute","width":contentAreaWidth,"height":contentAreaHeight,"left":contentAreaRight_left,"top":contentAreatop,"color":"#77ff00","font-size":font_size,"line-height":line_height,"background-color":"#777777","font-family":"幼圆"});$("#selectpage").css({"posit
7、ion":"absolute","left":document.body.offsetWidth*1/2-200,"top":contentAreatop+contentAreaHeight+font_size,"color":"#000000","font-size":font_size,"line-height":line_height,"background-color":"#ffffff"});//leftpagepeelcssset$("#pagePeel_area_left").css({"position":"absolute"
8、,"width":pagePeelArealeft_Width,"height":pagePeelArealeft_height,"left":pagePeelAr
