web网页txt电子书阅读实现技术文档 1Word文档格式.docx

1、三、分页及翻页技术具体实现如下：1）左右内容显示区、鼠标感应区、卷页显示区等区域定位： $（#contentAreaLeft）.css（position:absolute,widthcontentAreaWidth,heightcontentAreaHeight,leftcontentAreaLeft_left,topcontentAreatop,color#77ff00font-sizefont_size,line-heightline_height,background-color#777777font-family幼圆）;#contentAreaRightcontentAreaRight

2、_left,#selectpagedocument.body.offsetWidth*1/2-200,contentAreatop+contentAreaHeight+font_size,#000000#ffffff /left page peel css set#pagePeel_area_leftpagePeelArealeft_Width, pagePeelArealeft_height,pagePeelAreaLeft_left,pagePeelAreaLeft_top,z-index10displaynone#TriggerArea_left300 contentAreatop+co

3、ntentAreaHeight-300,1block /right page peel css set#pagePeel_area_rightpagePeelArearight_Width, pagePeelArearight_height,pagePeelAreaRight_left,pagePeelAreaRight_top,#TriggerArea_rightcontentAreaRight_left+contentAreaWidth-300,2）txt文件的载入：通过jquery的ajax异步载入指定url位置的txt文件。代码如下： htmlobj= $.ajax（url:康熙王朝.

4、txt,async:true）; receivedTxt=htmlobj.responseText;3）将接收到的txt文本根据回车符判断按段落数分为多个子文本块，避免文件过大时一开始对所有文本进行处理缓慢。 temp=receivedTxt.split（/n/）; /按段落数先分成几组 if（temp.length%paragraphsPergroup!=0） groupsNum=parseInt（temp.length/paragraphsPergroup）+1 for（var i=0;igroupsNum;i+） if（igroupsNum-1） groupsi=temp.slice（i

5、*paragraphsPergroup,（i+1）*paragraphsPergroup）; else groupsgroupsNum-1=temp.slice（groupsNum-1）*paragraphsPergroup,temp.length）; groupsNum=parseInt（temp.length/paragraphsPergroup）; groupsi=temp.slice（i*paragraphsPergroup,（i+1）*paragraphsPergroup）; 4）document ready的时候（相当于unity3d的Start）将所有子文本快中的第一快进行处理，

6、往pages中添加页。 /对当前组（元素为一个个字符串段落的数组）的所有段落进行处理 groupscurrentgroupIndex.length; /还原文本换行 groupscurrentgroupIndexi+=; groupscurrentgroupIndexi=groupscurrentgroupIndexi.replace（/*/g,）;/文本自带的一些*换为空格 /处理不够一整行的情况 if（getlength（groupscurrentgroupIndexi）charsPerline） /填空直到够整行 while（getlength（groupscurrentgroupInd

7、exi）charsPerline）/处理占多行的文本段 var _lines=parseInt（getlength（groupscurrentgroupIndexi）/charsPerline）; if（getlength（groupscurrentgroupIndexi）%charsPerline0） while（getlength（groupscurrentgroupIndexi）（_lines+1）*charsPerline） groupstr=groupscurrentgroupIndex.join（ currentgroupcharsNum=getlength（groupstr）;

8、if（currentgroupcharsNum%charsPerpage! currentgrouppagesNum=parseInt（currentgroupcharsNum/charsPerpage）+1; pagesNum=pages.push（substr_chn（groupstr, 0, charsPerpage）; for（var i=1;currentgrouppagesNum; var startindex=0; for（var n=0;ni;n+） startindex+=pagesn+groupIndexpre.length;/初始groupIndexpre为0 if（i=

9、2） isEnd=false; indexOut=false; document.getElementById（pagePeel_img_left）.src=imgs/pagePeelleft_500.png $（contentAreaWidth+50, contentAreaHeight+150,contentAreatop+contentAreaHeight-（contentAreaHeight+150）,500,function（） currentpagePairIndex-=1; leftAreaContent=pages2*currentpagePairIndex-2;imgs/pa

10、gePeelleft_100.png else alert（已经是首页7）往后翻页的处理（当前子文本快内容显示到末尾的时候对下一个子文本快进行处理，往pages中添加页）,代码如下: /当前group所分的页数不够，需要新的group页添加进来 if（pagesNum2*（currentpagePairIndex+1） if（currentgroupIndex currentgroupIndex+=1; /对当前组（元素为一个个段落的字符串的数组）的所有段落进行处理 groupIndexpre=pagesNum; /alert（组的页索引前缀+groupIndexpre+ 当前组有+currentgrouppagesNum+页 for（var i=1; pagesNum=pages.push