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

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

《web网页txt电子书阅读实现技术文档 1Word文档格式.docx》由会员分享，可在线阅读，更多相关《web网页txt电子书阅读实现技术文档 1Word文档格式.docx（17页珍藏版）》请在冰豆网上搜索。

三、分页及翻页技术具体实现如下：

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"

contentAreaRight_left,"

#selectpage"

document.body.offsetWidth*1/2-200,"

contentAreatop+contentAreaHeight+font_size,"

#000000"

#ffffff"

//leftpagepeelcssset

#pagePeel_area_left"

pagePeelArealeft_Width,"

pagePeelArealeft_height,"

pagePeelAreaLeft_left,"

pagePeelAreaLeft_top,"

z-index"

10"

display"

none"

#TriggerArea_left"

300"

"

contentAreatop+contentAreaHeight-300,"

1"

block"

//rightpagepeelcssset

#pagePeel_area_right"

pagePeelArearight_Width,"

pagePeelArearight_height,"

pagePeelAreaRight_left,"

pagePeelAreaRight_top,"

#TriggerArea_right"

contentAreaRight_left+contentAreaWidth-300,"

2）txt文件的载入：

通过jquery的ajax异步载入指定url位置的txt文件。

代码如下：

htmlobj=$.ajax（{url:

康熙王朝.txt"

async:

true}）;

receivedTxt=htmlobj.responseText;

3）将接收到的txt文本根据回车符判断按段落数分为多个子文本块，避免文件过大时一开始对所有文本进行处理缓慢。

temp=receivedTxt.split（/\n/）;

//按段落数先分成几组

if（temp.length%paragraphsPergroup!

=0）{

groupsNum=parseInt（temp.length/paragraphsPergroup）+1

for（vari=0;

i<

groupsNum;

i++）{

if（i<

groupsNum-1）{

groups[i]=temp.slice（i*paragraphsPergroup,（i+1）*paragraphsPergroup）;

}else{

groups[groupsNum-1]=temp.slice（（groupsNum-1）*paragraphsPergroup,temp.length）;

}

groupsNum=parseInt（temp.length/paragraphsPergroup）;

groups[i]=temp.slice（i*paragraphsPergroup,（i+1）*paragraphsPergroup）;

}

4）documentready的时候（相当于unity3d的Start）将所有子文本快中的第一快进行处理，往pages中添加页。

//对当前组（元素为一个个字符串段落的数组）的所有段落进行处理

groups[currentgroupIndex].length;

//还原文本换行

groups[currentgroupIndex][i]+="

<

br/>

;

groups[currentgroupIndex][i]=groups[currentgroupIndex][i].replace（/[*]/g,"

）;

//文本自带的一些*换为空格

//处理不够一整行的情况

if（getlength（groups[currentgroupIndex][i]）<

charsPerline）{

//填空直到够整行

while（getlength（groups[currentgroupIndex][i]）<

groups[currentgroupIndex][i]=groups[currentgroupIndex][i].replace（/（.{6}$）/,"

$1"

}elseif（getlength（groups[currentgroupIndex][i]）>

charsPerline）{//处理占多行的文本段

var_lines=parseInt（getlength（groups[currentgroupIndex][i]）/charsPerline）;

if（getlength（groups[currentgroupIndex][i]）%charsPerline>

0）{

while（getlength（groups[currentgroupIndex][i]）<

（_lines+1）*charsPerline）{

groupstr=groups[currentgroupIndex].join（"

currentgroupcharsNum=getlength（groupstr）;

if（currentgroupcharsNum%charsPerpage!

currentgrouppagesNum=parseInt（currentgroupcharsNum/charsPerpage）+1;

pagesNum=pages.push（substr_chn（groupstr,0,charsPerpage））;

for（vari=1;

currentgrouppagesNum;

varstartindex=0;

for（varn=0;

n<

i;

n++）{

startindex+=pages[n+groupIndexpre].length;

//初始groupIndexpre为0

}

if（i<

currentgrouppagesNum-1）{

pagesNum=pages.push（substr_chn（groupstr,startindex,charsPerpage））;

}else{

pagesNum=pages.push（groupstr.substr（startindex））;

}else{

currentgrouppagesNum=parseInt（currentgroupcharsNum/charsPerpage）;

pagesNum=pages.push（substr_chn（groupstr,0,charsPerpage））;

leftAreaContent=pages[2*currentpagePairIndex-2];

rightAreaContent=pages[2*currentpagePairIndex-1];

）.html（leftAreaContent）;

）.html（rightAreaContent）;

#pageIndexInput"

）.val（currentpagePairIndex）;

5）左右triggerdiv区域鼠标进入和离开事件对于卷角效果的实现：

//mouseeventsforright

）.hover（function（）{

）.stop（）.animate（{"

100"

contentAreaRight_left+contentAreaWidth-100,"

contentAreatop+contentAreaHeight-100},500,function（）{

}）;

},function（）{

contentAreaRight_left+contentAreaWidth-pagePeelArearight_Width,"

contentAreatop+contentAreaHeight-pagePeelArealeft_height},1000,function（）{

#btn_right"

-20"

）;

//mouseeventsforleft

$（"

#btn_left"

20"

6）往回翻页的处理（在左卷角区域点击鼠标时）：

）.click（function（）{

if（currentpagePairIndex>

=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=pages[2*currentpagePairIndex-2];

imgs/pagePeelleft_100.png"

}else{alert（"

已经是首页"

}

7）往后翻页的处理（当前子文本快内容显示到末尾的时候对下一个子文本快进行处理，往pages中添加页）,代码如下:

//当前group所分的页数不够，需要新的group页添加进来

if（pagesNum<

2*（currentpagePairIndex+1））{

if（currentgroupIndex<

currentgroupIndex+=1;

//对当前组（元素为一个个段落的字符串的数组）的所有段落进行处理

groupIndexpre=pagesNum;

//alert（"

组的页索引前缀"

+groupIndexpre+"

当前组有"

+currentgrouppagesNum+"

页"

for（vari=1;

pagesNum=pages.push