web网页Txt电子书阅读实现技术文档.docVIP

图书资源阅览之 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层次高于trigger div层次和显示内容区域层次，但display值为none，所以默认是不显示的，不会阻隔trigger div感应鼠标事件。如下图(红色区域为鼠标事件感应区，橙色区域为卷页效果区）： 以右下角翻页为例（翻至下一页）。当鼠标进入trigger div区域，pagepeel div display值变为block显示出来，并通过jquery的animate对pagepeel div的宽、高和左上角的绝对位置进行动态改变，形似卷起开始遮挡住内容区域部分内容。鼠标离开后则pagepeel div display值变为none不显示。如下图： 当在卷角处点击鼠标时，通过过jquery的animate使卷角区域向左上角变的更大，中途换掉pagepeel 图片为实际的书页即将被翻过的状态图片，然后开始改变当前页码值重新显示左右两个区域的内容。如下图（状态图片等待修改）： 三、分页及翻页技术具体实现如下： 1）左右内容显示区、鼠标感应区、卷页显示区等区域定位： $(#contentAreaLeft).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).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({position: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}); //left page peel css set $(#pagePeel_area_left).css({position:absolute,width:pagePeelArealeft_Width,height: pagePeelArealeft_height,left:pagePeelAreaLeft_left,top:pagePeelAreaLeft_