- 1、本文档共14页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
web网页Txt电子书阅读实现技术文档.doc
图书资源阅览之
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_
您可能关注的文档
- dos下的专业硬盘检测和坏道维修软件MHDD图文教程.doc
- Dqocic小学教育英语教师能力测试阅卷情况报道.doc
- du信息技术认识画图课件.ppt
- DWI判断卵巢上皮源性囊实性肿瘤性质的探讨.pdf
- EGF多态性与HBV进展相关.pdf
- Ehlib_的使用.doc
- ELISA标准操作及技术服务的常见问题.doc
- ERPR在子宫内膜癌中的表达及其临床意义.pdf
- Erwin的应用.doc
- Evhtta专业课资料常见问题解答A.doc
- 2025年休闲食品健康化转型下的市场拓展策略与渠道创新报告[001].docx
- 农村电商服务站品牌建设:2025年运营模式创新与品牌传播报告.docx
- 2025年互联网金融平台合规整改与金融科技监管的合规监督与可持续发展策略.docx
- 2025年短视频平台内容监管与平台社会责任关系研究报告.docx
- 农产品溯源体系在农产品质量安全监管中的信用体系构建与实施策略研究.docx
- 2025年工业互联网平台数据备份与恢复策略创新方案探讨.docx
- 2025年线上法律咨询服务平台法律咨询行业竞争策略研究.docx
- 农业产业集群农产品流通体系构建与发展机制报告.docx
- 智能制造领航者:2025年3D打印技术在规模生产中的应用效果分析报告[001].docx
- 农村金融服务创新与农村金融消费者权益保护法规实施效果分析报告.docx
最近下载
- 检验医学室内质控图模板.xls VIP
- 酒店工程部服务意识培训.ppt
- 2014款雷克萨斯CT200h_汽车使用手册用户操作图示驾驶指南车主车辆说明书电子版.pdf
- SMED快速换模完整.doc VIP
- 《婴幼儿回应性照料》第八讲.pptx VIP
- 乳胶漆施工工艺55页课件.ppt VIP
- 最新人教版九年级数学上册-全册课件全集(1215张).pptx VIP
- 2025至2030中国村镇银行行业深度分析及发展前景与发展战略报告.docx
- JTG D 20-2017公路路线设计规范_(高清版).pdf VIP
- 道奇-JCUV-产品使用说明书-Journey Crossroad 旅行版(2.4L)-JCUV (B6F)-2013款酷威用户手册(产品使用说明书).pdf VIP
文档评论(0)