CN103488411A - 切换页面的方法和装置 - Google Patents

Abstract

本发明提供了一种切换页面的方法和装置。所述方法包括：通过页面脚本的加载创建若干个连续的虚拟页面，并显示于触摸屏中；采集所述显示的虚拟页面中的触点位置；根据所述触点位置对所述触摸屏中显示的虚拟页面进行翻页处理。所述装置包括：页面虚拟模块，用于通过页面脚本的加载创建若干个连续的虚拟页面，并显示于触摸屏中；采集模块，用于采集所述显示的虚拟页面中的触点位置；处理模块，用于根据所述触点位置对所述触摸屏中显示的虚拟页面进行翻页处理。采用本发明实现了跨浏览器平台。

Description

切换页面的方法和装置

技术领域

本发明涉及网络技术，特别是涉及一种切换页面的方法和装置。

背景技术

随着各种智能手机以及平板电脑等移动终端的发展，越来越多的应用通过用户在移动终端触摸屏上的触摸操控实现操控指令的输入，特别是在通过某一应用进行页面浏览的过程中，用户通过在触摸屏中进行点击或滑动等触摸行为实现页面之间的切换。例如，用户点击触摸屏显示的页面中所提供的“上一页”或“下一页”按钮进行翻页。

为进一步简化用户在触摸屏中的触摸行为，某一网站还提供了触屏版网站，用户只需随意地点击触摸屏的左边或者右边即时实现网页页面的前翻页或后翻页。但是，触屏版网站仅能在特定的浏览器中实现，无法在各种不同的浏览器中应用触屏版网站实现网页页面的随意翻动，缺乏跨浏览器平台的支持。

发明内容

基于此，有必要针对无法在各种不同的浏览器中应用触屏版网站实现网页页面的随意翻动的问题，提供一种能实现跨浏览器平台的切换页面的方法。

此外，还有必要提供一种能实现跨浏览器平台的切换页面的装置。

一种切换页面的方法，包括如下步骤：

通过页面脚本的加载创建若干个连续的虚拟页面，并显示于触摸屏中；

采集所述显示的虚拟页面中的触点位置；

根据所述触点位置对所述触摸屏中显示的虚拟页面进行翻页处理。

在其中一个实施例中，所述创建若干个连续的虚拟页面，并显示于触摸屏中的步骤包括：

通过页面脚本的加载触发创建若干个连续的虚拟页面，并将所述页面脚本中记录的页面内容承载于相应的虚拟页面中；

调整所述虚拟页面，使所述虚拟页面与触摸屏相匹配；

将所述承载页面内容的虚拟页面显示于触摸屏中，在所述触摸屏边缘的不可见区域并列排布与所述显示的虚拟页面相邻的虚拟页面。

在其中一个实施例中，所述采集所述显示的虚拟页面中的触点位置的步骤之后还包括：

判断所述触点位置是否处于显示的虚拟页面的第一区域，若是，则在翻页标记中赋予前翻标记值，若否，则在翻页标记中赋予后翻标记值。

在其中一个实施例中，所述采集所述显示的虚拟页面中的触点位置的步骤包括：

在所述显示的虚拟页面中分别采集触摸起始点和滑动采样点所对应的触点位置；

所述采集所述显示的虚拟页面中的触点位置的步骤之后还包括：

根据所述触摸起始点和滑动采样点所对应的触点位置在翻页标记中赋予前翻标记值或后翻标记值。

在其中一个实施例中，所述根据所述触点位置对所述触摸屏中显示的虚拟页面进行翻页处理的步骤包括：

通过画布将所述翻页标记对应的页面内容承载于相应的虚拟页面；

对显示的虚拟页面和所述承载了翻页标记对应的页面内容的虚拟页面之间进行动态切换。

在其中一个实施例中，所述通过画布将所在其中一个实施例中包括：

在所述翻页标记对应的虚拟页面中创建画布；

从所述翻页标记对应的页面内容中读取字符，并判断所述读取的字符是否为换行符，若否，则进一步判断画布的行缓冲区中的字符长度是否达到屏幕宽度，若是，则

将所述行缓冲区中的字符绘制到画布，并累加所述画布的行数，若否，则

将所述读取的字符推入所述画布的行缓冲区。

在其中一个实施例中，所述将所述翻页标记对应的页面内容承载于相应的虚拟页面的步骤还包括：

判断到所述读取的字符为换行符，则进入所述将所述行缓冲区中的字符绘制到画布，并累加所述画布的行数的步骤。

在其中一个实施例中，所述累加所述画布的行数的步骤之后还包括：

判断所述画布的行数是否达到阈值，若是，则进入所述对显示的虚拟页面和所述承载了翻页标记对应的页面内容的虚拟页面之间进行动态切换的步骤，若否，则返回从所述翻页标记对应的页面内容中读取字符的步骤。

在其中一个实施例中，所述对显示的虚拟页面和所述承载了翻页标记对应的页面内容的虚拟页面之间进行动态切换的步骤包括：

根据所述触摸起始点和滑动采样点所对应的触点位置得到滑动偏移量，并通过所述滑动偏移量得到所述显示的虚拟页面和所述承载了翻页标记对应的页面内容的虚拟页面之间的变换属性；

获取过渡属性，并按照所述过渡属性和变换属性动态切换所述显示的虚拟页面和所述承载了翻页标记对应的页面内容的虚拟页面。

一种切换页面的装置，包括：

页面虚拟模块，用于通过页面脚本的加载创建若干个连续的虚拟页面，并显示于触摸屏中；

采集模块，用于采集所述显示的虚拟页面中的触点位置；

处理模块，用于根据所述触点位置对所述触摸屏中显示的虚拟页面进行翻页处理。

在其中一个实施例中，所述页面虚拟模块包括：

创建单元，用于通过页面脚本的加载触发创建若干个连续的虚拟页面，并将所述页面脚本中记录的页面内容承载于相应的虚拟页面中；

调整单元，用于调整所述虚拟页面，使所述虚拟页面与触摸屏相匹配；

显示单元，用于将所述承载页面内容的虚拟页面显示于触摸屏中，在所述触摸屏边缘的不可见区域并列排布与所述显示的虚拟页面相邻的虚拟页面。

在其中一个实施例中，还包括：

翻页判断模块，用于判断所述触点位置是否处于显示的虚拟页面的第一区域，若是，则在翻页标记中赋予前翻标记值，若否，则在翻页标记中赋予后翻标记值。

在其中一个实施例中，所述采集模块还用于在所述显示的虚拟页面中分别采集触摸起始点和滑动采样点所对应的触点位置；

所述装置还包括：

翻页标记模块，用于根据所述触摸起始点和滑动采样点所对应的触点位置在翻页标记中赋予前翻标记值或后翻标记值。

在其中一个实施例中，所述处理模块包括：

页面承载单元，用于通过画布将所述翻页标记对应的页面内容承载于相应的虚拟页面；

动态切换单元，用于对显示的虚拟页面和所述承载了翻页标记对应的页面内容的虚拟页面之间进行动态切换。

在其中一个实施例中，所述页面承载单元包括：

画布创建单元，用于在所述翻页标记对应的虚拟页面中创建画布；

读取单元，用于从所述翻页标记对应的页面内容中读取字符，并判断所述读取的字符是否为换行符，若否，则进一步判断画布的行缓冲区中的字符长度是否达到屏幕宽度，若是，则通知绘制单元，若否，则通知缓冲单元；

所述绘制单元用于将所述行缓冲区中的字符绘制到画布，并累加所述画布的行数；

所述缓冲单元用于将所述读取的字符推入所述画布的行缓冲区。

在其中一个实施例中，所述读取单元还用于判断到所述读取的字符为换行符则通知所述绘制单元。

在其中一个实施例中，所述绘制单元还用于判断所述画布的行数是否达到阈值，若是，则通知所述动态切换单元，若否，则通知所述读取单元。

在其中一个实施例中，所述动态切换单元包括：

偏移单元，用于根据所述触摸起始点和滑动采样点所对应的触点位置得到滑动偏移量，并通过所述滑动偏移量得到所述显示的虚拟页面和所述承载了翻页标记对应的页面内容的虚拟页面之间的变换属性；

页面切换单元，用于获取过渡属性，并按照所述过渡属性和变换属性动态切换所述显示的虚拟页面和所述承载了翻页标记对应的页面内容的虚拟页面。

上述切换页面的方法和装置，通过页面脚本的加载创建若干个连续的虚拟页面，并在触摸屏中显示，此时，采集用户在显示的虚拟页面中的触点位置，根据该触点位置进行多个页面所对应的虚拟页面的翻页处理，由于这一过程中浏览器直接加载相应的页面脚本实现的，可在服务端进行统一部署，并应用于不同浏览器中，任一浏览器只要页面脚本的作用下就可以进行虚拟页面的翻页，实现了跨浏览器平台的页面切换。

附图说明

图1为一个实施例中切换页面的方法的流程图；

图2为图1中通过页面脚本的加载创建若干个连续的虚拟页面，并显示于触摸屏中的方法流程图；

图3为另一个实施例中切换页面的方法的流程图；

图4为一个实施例中根据触点位置对触摸屏中显示的虚拟页面进行翻页处理的方法流程图；

图5为图4中通过画布将翻页标记对应的页面内容承载于相应的虚拟页面的方法流程图；

图6为图4中对显示的虚拟页面和承载了翻页标记对应的页面内容的虚拟页面之间进行动态切换的方法流程图；

图7为一个实施例中切换页面的装置的结构示意图；

图8为图7中页面虚拟模块的结构示意图；

图9为另一个实施例中切换页面的装置的结构示意图；

图10为另一个实施例中切换页面的装置的结构示意图；

图11为一个实施例中处理模块的结构示意图；

图12为图11中页面承载单元的结构示意图；

图13为图11中动态切换单元的结构示意图。

具体实施方式

如图1所示，在一个实施例中，一种切换页面的方法，包括如下步骤：

步骤S10，通过页面脚本的加载创建若干个连续的虚拟页面，并显示于触摸屏中。

在一个实施例中，页面脚本记录了相应的页面样式，通过浏览器通过页面脚本即可进而页面的加载，进而显示于浏览器界面中。具体地，根据用户的浏览请求获取页面脚本，进而在页面脚本的加载过程中创建若干个连续的虚拟页面，将用户请求浏览的页面所对应的虚拟页面展示于触摸屏中。

虚拟页面为Div对象，可通过数组的形式保存每一虚拟页面中的数据，创建的虚拟页面数量优选为三个，分别对应了用户请求浏览的页面，以及与之相邻的前页和后页，相应的，前页、用户请求浏览的页面以及后页分别用数组保存为txt[1]、txt[2]和txt[3]。创建三个连续的虚拟页面在节省存储空间的前提下保证了页面切换过程中的流畅性和平顺性，进而有利于切换页面在移动终端中实现，此外，通过虚拟页面来实现页面切换，可在后续的页面切换过程中循环利用创建的虚拟页面，减少了对象的创建操作，提高了性能。

进一步的，页面脚本是通过HTML5网页编程语言实现的，打开某一页面的过程即为获取页面脚本以及加载页面脚本的过程，可通过页面的load事件或DOMContentLoaded事件完成。因此，可预先将创建虚拟页面的初始化函数注册到页面的load事件或DOMContentLoaded事件的处理钩子。

步骤S30，采集显示的虚拟页面中的触点位置。

本实施例中，用户与触摸屏之间的接触点即为触点，所对应的触点位置可以通过坐标值的形式表现。

步骤S50，根据触点位置对触摸屏中显示的虚拟页面进行翻页处理。

本实施例中，根据采集得到的触点位置可以用户在触摸屏上的操控意图，进而对触摸屏中显示的虚拟页面是进行前翻页还是后翻页，以实现触摸屏中当前显示的虚拟页面与相邻虚拟页面之间的页面切换。

如图2所示，在一个实施例中，上述步骤S10的具体过程包括：

步骤S110，通过页面脚本的加载触发创建若干个连续的虚拟页面，并将页面脚本中记录的页面内容承载于相应的虚拟页面中。

本实施例中，在页面脚本的加载过程中创建多个虚拟页面，这些创建的虚拟页面所对应的多个页面是连续的，例如，创建的三个虚拟页面分别对应了第5页页面、第6页页面以及第7页页面。

页面脚本记录了页面样式以及页面内容等信息，因此，在加载页面脚本的过程中从页面脚本提取到记录的页面内容，进而将页面内容承载到相应的虚拟页面中。例如，在创建的第5页页面、第6页页面以及第7页页面所对应的三个虚拟页面中，由上所述，所加载的页面脚本为第6页页面的页面脚本，在从页面脚本提取到页面内容之后，将页面内容承载到三个连续虚拟页面中的第二个虚拟页面，该页面内容将以数组的形式保存。

步骤S130，调整虚拟页面，使虚拟页面与触摸屏相匹配。

本实施例中，根据触摸屏中屏幕窗口的尺寸对虚拟页面所对应的尺寸进行调整，以满足全屏阅读或者其它阅读模式的需要。例如，可调整虚拟页面的宽度和高度，使虚拟页面的宽度和高度与屏幕窗口的宽度和高度相一致，进而为用户全屏展示虚拟页面。

步骤S150，将承载页面内容的虚拟页面显示于触摸屏中，在触摸屏边缘的不可见区域并列排布与显示的虚拟页面相邻的虚拟页面。

本实施例中，并列排布多个连续的虚拟页面，承载了页面内容的虚拟页面将展示于触摸屏的屏幕窗口，而其它虚拟页面则置于触摸屏边缘的不可见区域，并随着用户在触摸屏上的滑动操作移动到屏幕窗口。并列排布的多个虚拟页面根据触摸屏的显示可以在水平方向上并列排布，也可以是在垂直方向上并列排布。

具体的，为方便进行虚拟页面的排布，将根据虚拟页面边缘上某一点的坐标进行排布。在优选的实施例中，分别获取虚拟页面左上角的坐标，并通过数组的形式保存，进而通过虚拟页面左上角的坐标对多个虚拟页面进行并列排布。

如图3所示，在另一个实施例中，上述步骤S30之后还包括：

步骤S410，判断触点位置是否处于显示的虚拟页面的第一区域，若是，则进入步骤S420，若否，则进入步骤S430。

本实施例中，将触摸屏的屏幕窗口显示的虚拟页面一分为二，若判断到采集的触点位置处于虚拟页面的第一区域，则为翻页标记tflag赋予前翻标记值，若判断到触点位置是处于虚拟页面的第二区域的，则为翻页标记tflag赋予后翻标记值。

具体的，多个虚拟页面在水平方向上并列排布的场景中，若前翻页，连续并列排布的虚拟页面将向右滑动，若后翻页，连续并列排布的虚拟页面将向左滑动。因此，根据虚拟页面的滑动，可将触摸屏的屏幕窗口中显示的虚拟页面在水平方向上划分为左右两个二个之一区间，其中，左边的二分之一区间为第一区间，右边的二分之一区间为第二区间。

步骤S420，在翻页标记中赋予前翻标记值。

本实施例中，在对触点位置进行判断之后，根据判断结果对翻页标记进行赋值，进而根据翻页标记中的数值对虚拟页面进行前翻面或者后翻页。在优选的实施例中，前翻标记值可以为-1，后翻标记值为1。

步骤S430，在翻页标记中赋予后翻标记值。

上述页面切面过程通过用户在触摸屏中的点击操作所对应的触点位置进行虚拟页面之间的翻页。

在另一个实施例中，上述步骤S30的具体过程为：在显示的虚拟页面中分别采集触摸起始点和滑动采样点所对应的触点位置。

本实施例中，在用户对触摸屏的触摸滑动操作中，分别采集触摸起始点和滑动采样点，其中，滑动采样点是在用户的滑动操作过程中进行采样所对应的触点。

进一步的，预先在虚拟页面所对应的Div对象中绑定触摸起始事件、触摸滑动事件以及触摸终止事件，从而通过监听Div对象中触发的事件进行采样。

上述步骤S30之后还包括根据触摸起始点和滑动采样点所对应的触点位置在翻页标记中赋予前翻标记值或后翻标记值。

本实施例中，根据触摸起始点和滑动采样点所对应的触点位置可以确定出用户在触摸屏上的滑动方向，进而根据滑动方向识别当前的操作是需进行前翻页还是后翻页，进而为翻页标记赋予相应的数值，但是某一滑动方向所对应的是前翻页还是后翻页可根据用户的使用习惯设定。

具体的，用户在触摸屏上的滑动方向可以通过比较触摸起始点和滑动采样点对应的触点位置之间的大小得到。例如，多个虚拟页面在水平方向上并列排布的场景中，用于标记触点位置的坐标系的水平方向是以水平向右的方向为正方向的，此时，可将向右滑动的滑动方向对应于虚拟页面的前翻页，向左滑动的滑动方向对应于虚拟页面的后翻页，以使得用户的触摸滑动操作方向与虚拟页面的移动方向相同，进而易于用户操作，进而判断滑动采样点水平方向上的坐标值是否大于触摸起始点水平方向上的坐标值，若是，则为翻页标记赋予前翻页标记值，若否，则为翻页标记赋予后翻页标记值。此外，还可对滑动方向所对应的翻页操作进行相反设置，而用于标记触点位置的坐标系也可根据需要设置为其它形式。而多个虚拟页面在垂直方向上并列排布的场景也与上述描述相似，在此不再赘述。

如图4所示，在一个实施例中，上述步骤S50的具体过程包括：

步骤S510，通过画布将翻页标记对应的页面内容承载于相应的虚拟页面。

本实施例中，获知用户在触摸屏中的操作是需前翻页还是后翻页之后，将对即将切换到触摸屏的屏幕窗口中的虚拟页面进行加载，以通过画布将相应的页面内容承载于即将地切换到触摸屏的屏幕窗口中的虚拟页面。

画布为Html5网络编程语言中的Canvas对象，通过画布来进行虚拟页面中字符的绘制，而非直接将字符展现于虚拟页面，由于画布能够精确地度量字符的大小，所以通过画布绘制字符有利于排版，此外，在画布的作用下，虚拟页面的文本被绘制成了图片，进而有利于防抓取和防盗用。

如图5所示，在一个实施例中，上述步骤S510的具体过程包括：

步骤S511，在翻页标记对应的虚拟页面中创建画布。

本实施例中，创建Canvas对象，并获取与创建的Canvas对象相关的上下文对象ctx，上下文对象ctx表征了画布的样式，在创建的画布中通过上下文对象ctx设置画布颜色、字体和对齐方式等样式。

步骤S512，从翻页标记对应的页面内容中读取字符，并判断读取的字符是否为换行符，若否，则进入步骤S513，若是，则进入步骤S514。

本实施例中，根据翻页标记的赋值确定当前切换的页面，进而为即将被切换到触摸屏的屏幕窗口中显示的页面进行数据加载。在数据加载过程中，获取页面内容，并以字符串形式存放到chapter数组中，进而从chapter数组中一一读取字符，判断读取的字符是否为换行符，若不是换行符，则需将读取的字符存入行缓冲区，进而通过行缓冲区在画布中逐行绘制字符。通过行缓冲区批量绘制画布中的字符，而并非进行逐个字符的绘制，大大地加快了画布的绘制速度。

若判断到读取的字符是换行符，则说明行缓冲区中存储了一行的字符，此时只须将这一行字符绘制于画布中即可。

步骤S513，进一步判断画布的行缓冲区中的字符长度是否达到屏幕宽度，若是，则进入步骤S514，若否，则进入步骤S515。

本实施例中，在判断到读取的字符不是换行符，需要将其存入行缓冲区时，还需进一步判断行缓冲区的空间是否足够存入字符，若行缓冲区的空间已满，则必须先将行缓冲区中的字符绘制到画布，并清空行缓冲区之后再存入读取的字符，若行缓冲区的空间足够存入读取的字符，则直接将读取的字符存入画布的行缓冲区。

步骤S514，将行缓冲区中的字符绘制到画布，并累加画布的行数。

本实施例中，在以行为单位批量进行字符绘制时，还应对画布的行数进行累加，进而通过累加的画布的行数获知当前画布中绘制的字符行数。

步骤S515，将读取的字符推入画布的行缓冲区。

在另一个实施例中，上述步骤S516之后还包括：判断画布的行数是否达到阈值，若是，则进入步骤S530，若否，则返回步骤S512。

本实施例中，根据累加的画布行数判断画布中绘制的字符是否已经达到最大处理行数或页面内容的末尾，若是，则进行虚拟页面的切换，若否，则继续进行字符的读取。用于对画布行数进行判断的阈值可以是虚拟页面的最大处理行数，可以预先通过屏幕窗口的高度以及每一行的行高进行运算得到。

步骤S530，对显示的虚拟页面和承载了翻页标记对应的页面内容的虚拟页面之间进行动态切换。

本实施例中，在完成了即将切换到屏幕窗口的虚拟页面的数据加载以及画布绘制之后，按照设定的动画效果进行当前显示的虚拟页面和即将切换到屏幕窗口的虚拟页面之间的切换。

如图6所示，在一个实施例中，上述步骤S530的具体过程包括：

步骤S531，根据触摸起始点和滑动采样点所对应的触点位置得到滑动偏移量，并通过滑动偏移量得到显示的虚拟页面和承载了翻页标记对应的页面内容的虚拟页面之间的变换属性。

本实施例中，根据用户的触摸滑动操作进行计算得到滑动偏移量，例如，在多个虚拟页面在水平方向上并列排布的场景中，滑动偏移量可通过横坐标确定。通过滑动偏移量以及虚拟页面边缘上某一点的坐标（例如虚拟页面的左上角坐标）计算得到虚拟页面的移位，并作为虚拟页面之间的变换属性，例如，对于第二个虚拟页面，相应的移位为pos[1]-txt2.offset。变换属性用于在虚拟页面的动态切换过程中根据用户的触摸滑动操作移动虚拟页面，进而使得虚拟页面之间的翻页符合用户的触摸滑动操作。

步骤S533，获取过滤属性，并按照过渡属性和变换属性动态切换显示的虚拟页面和承载了翻页标记对应的页面内容的虚拟页面。

本实施例中，过渡属性用于设定虚拟页面之间的翻页过程所应用的动画效果，在虚拟页面的翻页过程中按照过渡属性进行动画效果的播放，并按照变换属性移动相应的虚拟页面。例如，过渡属性标识了动画的持续时间为200毫秒，动画风格为“开始快，结束慢”。

上述页面切换过程中通过使用CSS3在WebKit内核浏览器中专有的变换属性和过渡属性来实现滑动翻页的动画效果，不需要额外使用JavaScript的网络编程实现，提高了编程的高效性；此外，通过变换属性使用了3D变换函数，进而充分利用了设备的3D加速能力，使得动画效果的播放平顺流畅。

如图7所示，在一个实施例中，一种切换页面的装置，包括页面虚拟模块10、采集模块30以及处理模块50。

页面虚拟模块10，用于通过页面脚本的加载创建若干个连续的虚拟页面，并显示于触摸屏中。

在一个实施例中，页面脚本记录了相应的页面样式，通过浏览器通过页面脚本即可进而页面的加载，进而显示于浏览器界面中。具体地，页面虚拟模块10根据用户的浏览请求获取页面脚本，进而在页面脚本的加载过程中创建若干个连续的虚拟页面，将用户请求浏览的页面所对应的虚拟页面展示于触摸屏中。

虚拟页面为Div对象，可通过数组的形式保存每一虚拟页面中的数据，页面虚拟模块10创建的虚拟页面数量优选为三个，分别对应了用户请求浏览的页面，以及与之相邻的前页和后页，相应的，前页、用户请求浏览的页面以及后页分别用数组保存为txt[1]、txt[2]和txt[3]。页面虚拟模块10创建三个连续的虚拟页面在节省存储空间的前提下保证了页面切换过程中的流畅性和平顺性，进而有利于切换页面在移动终端中实现，此外，页面虚拟模块10通过虚拟页面来实现页面切换，可在后续的页面切换过程中循环利用创建的虚拟页面，减少了对象的创建操作，提高了性能。

进一步的，页面脚本是通过HTML5网页编程语言实现的，打开某一页面的过程即为获取页面脚本以及加载页面脚本的过程，页面虚拟模块10可通过页面的load事件或DOMContentLoaded事件完成。因此，可预先将创建虚拟页面的初始化函数注册到页面的load事件或DOMContentLoaded事件的处理钩子。

采集模块30，用于采集显示的虚拟页面中的触点位置。

本实施例中，用户与触摸屏之间的接触点即为触点，采集模块30采集到的触点位置可以通过坐标值的形式表现。

处理模块50，用于根据触点位置对触摸屏中显示的虚拟页面进行翻页处理。

本实施例中，处理模块50根据采集得到的触点位置可以用户在触摸屏上的操控意图，进而对触摸屏中显示的虚拟页面是进行前翻页还是后翻页，以实现触摸屏中当前显示的虚拟页面与相邻虚拟页面之间的页面切换。

如图8所示，在一个实施例中，页面虚拟模块10包括创建单元110、调整单元130以及显示单元150。

创建单元110，用于通过页面脚本的加载触发创建若干个连续的虚拟页面，并将页面脚本中记录的页面内容承载于相应的虚拟页面中。

本实施例中，创建单元110在页面脚本的加载过程中创建多个虚拟页面，这些创建的虚拟页面所对应的多个页面是连续的，例如，创建的三个虚拟页面分别对应了第5页页面、第6页页面以及第7页页面。

页面脚本记录了页面样式以及页面内容等信息，因此，创建单元110在加载页面脚本的过程中从页面脚本提取到记录的页面内容，进而将页面内容承载到相应的虚拟页面中。例如，在创建的第5页页面、第6页页面以及第7页页面所对应的三个虚拟页面中，由上所述，所加载的页面脚本为第6页页面的页面脚本，创建单元110从页面脚本提取到页面内容之后，将页面内容承载到三个连续虚拟页面中的第二个虚拟页面，该页面内容将以数组的形式保存。

调整单元130，用于调整虚拟页面，使虚拟页面与触摸屏相匹配。

本实施例中，调整单元130根据触摸屏中屏幕窗口的尺寸对虚拟页面所对应的尺寸进行调整，以满足全屏阅读或者其它阅读模式的需要。例如，调整单元130可调整虚拟页面的宽度和高度，使虚拟页面的宽度和高度与屏幕窗口的宽度和高度相一致，进而为用户全屏展示虚拟页面。

显示单元150，用于将承载页面内容的虚拟页面显示于触摸屏中，在触摸屏边缘的不可见区域并列排布与显示的虚拟页面相邻的虚拟页面。

本实施例中，显示单元150并列排布多个连续的虚拟页面，承载了页面内容的虚拟页面将展示于触摸屏的屏幕窗口，而其它虚拟页面则置于触摸屏边缘的不可见区域，并随着用户在触摸屏上的滑动操作移动到屏幕窗口。并列排布的多个虚拟页面根据触摸屏的显示可以在水平方向上并列排布，也可以是在垂直方向上并列排布。

具体的，为方便进行虚拟页面的排布，显示单元150将根据虚拟页面边缘上某一点的坐标进行排布。在优选的实施例中，显示单元150分别获取虚拟页面左上角的坐标，并通过数组的形式保存，进而通过虚拟页面左上角的坐标对多个虚拟页面进行并列排布。

如图9所示，在另一个实施例中，上述切换页面的装置还包括翻页判断模块40。翻页判断模块40用于判断触点位置是否处于显示的虚拟页面的第一区域，若是，则在翻页标记中赋予前翻标记值，若否，则在翻页标记中赋予后翻标记值。

本实施例中，将触摸屏的屏幕窗口显示的虚拟页面一分为二，若翻页判断模块40判断到采集的触点位置处于虚拟页面的第一区域，则为翻页标记tflag赋予前翻标记值，若判断到触点位置是处于虚拟页面的第二区域的，则为翻页标记tflag赋予后翻标记值。

具体的，多个虚拟页面在水平方向上并列排布的场景中，若前翻页，连续并列排布的虚拟页面将向右滑动，若后翻页，连续并列排布的虚拟页面将向左滑动。因此，根据虚拟页面的滑动，可将触摸屏的屏幕窗口中显示的虚拟页面在水平方向上划分为左右两个二个之一区间，其中，左边的二分之一区间为第一区间，右边的二分之一区间为第二区间。

在对触点位置进行判断之后，翻页判断模块40根据判断结果对翻页标记进行赋值，进而根据翻页标记中的数值对虚拟页面进行前翻面或者后翻页。在优选的实施例中，前翻标记值可以为-1，后翻标记值为1。

上述页面切面过程通过用户在触摸屏中的点击操作所对应的触点位置进行虚拟页面之间的翻页。

在另一个实施例中，采集模块30还用于在显示的虚拟页面中分别采集触摸起始点和滑动采样点所对应的触点位置。

本实施例中，在用户对触摸屏的触摸滑动操作中，采集模块30分别采集触摸起始点和滑动采样点，其中，滑动采样点是在用户的滑动操作过程中进行采样所对应的触点。

进一步的，预先在虚拟页面所对应的Div对象中绑定触摸起始事件、触摸滑动事件以及触摸终止事件，从而采集模块30通过监听Div对象中触发的事件进行采样。

如图10所示，上述切换页面的装置还包括翻页标记模块60，翻页标记模块60用于根据触摸起始点和滑动采样点所对应的触点位置在翻页标记中赋予前翻标记值或后翻标记值。

本实施例中，翻页标记模块60根据触摸起始点和滑动采样点所对应的触点位置可以确定出用户在触摸屏上的滑动方向，进而根据滑动方向识别当前的操作是需进行前翻页还是后翻页，进而为翻页标记赋予相应的数值，但是某一滑动方向所对应的是前翻页还是后翻页可根据用户的使用习惯设定。

具体的，用户在触摸屏上的滑动方向可以通过比较触摸起始点和滑动采样点对应的触点位置之间的大小得到。例如，多个虚拟页面在水平方向上并列排布的场景中，用于标记触点位置的坐标系的水平方向是以水平向右的方向为正方向的，此时，可将向右滑动的滑动方向对应于虚拟页面的前翻页，向左滑动的滑动方向对应于虚拟页面的后翻页，以使得用户的触摸滑动操作方向与虚拟页面的移动方向相同，进而易于用户操作，翻页标记模块60判断滑动采样点水平方向上的坐标值是否大于触摸起始点水平方向上的坐标值，若是，则为翻页标记赋予前翻页标记值，若否，则为翻页标记赋予后翻页标记值。此外，还可对滑动方向所对应的翻页操作进行相反设置，而用于标记触点位置的坐标系也可根据需要设置为其它形式。而多个虚拟页面在垂直方向上并列排布的场景也与上述描述相似，在此不再赘述。

如图11所示，在一个实施例中，上述处理模块50包括页面承载单元510以及动态切换单元530。

页面承载单元510，用于通过画布将翻页标记对应的页面内容承载于相应的虚拟页面。

本实施例中，获知用户在触摸屏中的操作是需前翻页还是后翻页之后，页面承载单元510将对即将切换到触摸屏的屏幕窗口中的虚拟页面进行加载，以通过画布将相应的页面内容承载于即将地切换到触摸屏的屏幕窗口中的虚拟页面。

画布为Html5网络编程语言中的Canvas对象，页面承载单元510通过画布来进行虚拟页面中字符的绘制，而非直接将字符展现于虚拟页面，由于画布能够精确地度量字符的大小，所以通过画布绘制字符有利于排版，此外，在画布的作用下，虚拟页面的文本被绘制成了图片，进而有利于防抓取和防盗用。

如图12所示，在一个实施例中，上述页面承载单元510包括画布创建单元511、读取单元513、绘制单元515以及缓冲单元517。

画布创建单元511，用于在翻页标记对应的虚拟页面中创建画布。

本实施例中，画布创建单元511创建Canvas对象，并获取与创建的Canvas对象相关的上下文对象ctx，上下文对象ctx表征了画布的样式，在创建的画布中通过上下文对象ctx设置画布颜色、字体和对齐方式等样式。

读取单元513，用于从翻页标记对应的内容中读取字符，并判断读取的字符是否为换行符，若是，则通知绘制单元515，若否，则进一步判断画布的行缓冲区中的字符长度是否达到屏幕宽度，若是，则通知绘制单元515，若否，则通知缓冲单元517。

本实施例中，根据翻页标记的赋值确定当前切换的页面，进而为即将被切换到触摸屏的屏幕窗口中显示的页面进行数据加载。在数据加载过程中，读取单元513获取页面内容，并以字符串形式存放到chapter数组中，进而从chapter数组中一一读取字符，判断读取的字符是否为换行符，若不是换行符，则需通知缓冲单元517将读取的字符存入行缓冲区，进而绘制单元515通过行缓冲区在画布中逐行绘制字符。绘制单元515通过行缓冲区批量绘制画布中的字符，而并非进行逐个字符的绘制，大大地加快了画布的绘制速度。

在读取单元513判断到读取的字符不是换行符，需要将其存入行缓冲区时，还需进一步判断行缓冲区的空间是否足够存入字符，若行缓冲区的空间已满，则必须通知绘制单元515先将行缓冲区中的字符绘制到画布，并清空行缓冲区之后再存入读取的字符，若行缓冲区的空间足够存入读取的字符，则通知缓冲单元517直接将读取的字符存入画布的行缓冲区。

若读取单元513判断到读取的字符是换行符，则说明行缓冲区中存储了一行的字符，此时只须将这一行字符绘制于画布中即可。

绘制单元515，用于将行缓冲区的字符绘制到画布，并累加画布的行数。

本实施例中，绘制单元515在以行为单位批量进行字符绘制时，还应对画布的行数进行累加，进而通过累加的画布的行数获知当前画布中绘制的字符行数。

缓冲单元517，用于将读取的字符推入画布的行缓冲区。

在另一个实施例中，上述绘制单元515还用于判断画布的行数是否达到阈值，若是，则通知动态切换单元530，若否，则通知读取单元513。

本实施例中，绘制单元515根据累加的画布行数判断画布中绘制的字符是否已经达到最大处理行数或页面内容的末尾，若是，则通知动态切换单元530进行虚拟页面的切换，若否，则通知读取单元513继续进行字符的读取。用于对画布行数进行判断的阈值可以是虚拟页面的最大处理行数，可以预先通过屏幕窗口的高度以及每一行的行高进行运算得到。

动态切换单元530，用于对显示的虚拟页面和承载了翻页标记对应的页面内容的虚拟页面之间进行动态切换。

本实施例中，在完成了即将切换到屏幕窗口的虚拟页面的数据加载以及画布绘制之后，动态切换单元530按照设定的动画效果进行当前显示的虚拟页面和即将切换到屏幕窗口的虚拟页面之间的切换。

如图13所示，在一个实施例中，上述动态切换单元530包括偏移单元531以及页面切换单元533。

偏移单元531，用于根据触摸起始点和滑动采样点所对应的触点位置得到滑动偏移量，并通过滑动偏移量得到显示的虚拟页面和承载了翻页标记对应的页面内容的虚拟页面之间的变换属性。

本实施例中，偏移单元531根据用户的触摸滑动操作进行计算得到滑动偏移量，例如，在多个虚拟页面在水平方向上并列排布的场景中，滑动偏移量可通过横坐标确定。通过滑动偏移量以及虚拟页面边缘上某一点的坐标（例如虚拟页面的左上角坐标）计算得到虚拟页面的移位，并作为虚拟页面之间的变换属性，例如，对于第二个虚拟页面，相应的移位为pos[1]-txt2.offset。变换属性用于在虚拟页面的动态切换过程中根据用户的触摸滑动操作移动虚拟页面，进而使得虚拟页面之间的翻页符合用户的触摸滑动操作。

页面切换单元533，用于获取过渡属性，并按照过渡属性和变换属性动态切换显示的虚拟页面和承载了翻页标记对应的页面内容的虚拟页面。

本实施例中，过渡属性用于设定虚拟页面之间的翻页过程所应用的动画效果，页面切换单元533按照过渡属性进行动画效果的播放，并按照变换属性移动相应的虚拟页面。例如，过渡属性标识了动画的持续时间为200毫秒，动画风格为“开始快，结束慢”。

上述切换页面的方法和装置，通过页面脚本的加载创建若干个连续的虚拟页面，并在触摸屏中显示，此时，采集用户在显示的虚拟页面中的触点位置，根据该触点位置进行多个页面所对应的虚拟页面的翻页处理，由于这一过程中浏览器直接加载相应的页面脚本实现的，可在服务端进行统一部署，并应用于不同浏览器中，任一浏览器只要页面脚本的作用下就可以进行虚拟页面的翻页，实现了跨浏览器平台的页面切换。

上述切换页面的方法和装置通过HTML5网页编程语言实现，不需要动用终端平台的原生编程，亦无需使用额外插件，可兼容各种终端平台，并通过服务端进行统一的部署、发布以及升级，提高了服务端处理的便利性。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (18)

1.一种切换页面的方法，包括如下步骤：

通过页面脚本的加载创建若干个连续的虚拟页面，并显示于触摸屏中；

采集所述显示的虚拟页面中的触点位置；

根据所述触点位置对所述触摸屏中显示的虚拟页面进行翻页处理。

2.根据权利要求1所述的切换页面的方法，其特征在于，所述创建若干个连续的虚拟页面，并显示于触摸屏中的步骤包括：

通过页面脚本的加载触发创建若干个连续的虚拟页面，并将所述页面脚本中记录的页面内容承载于相应的虚拟页面中；

调整所述虚拟页面，使所述虚拟页面与触摸屏相匹配；

将所述承载页面内容的虚拟页面显示于触摸屏中，在所述触摸屏边缘的不可见区域并列排布与所述显示的虚拟页面相邻的虚拟页面。

3.根据权利要求1所述的切换页面的方法，其特征在于，所述采集所述显示的虚拟页面中的触点位置的步骤之后还包括：

判断所述触点位置是否处于显示的虚拟页面的第一区域，若是，则在翻页标记中赋予前翻标记值，若否，则在翻页标记中赋予后翻标记值。

4.根据权利要求1所述的切换页面的方法，其特征在于，所述采集所述显示的虚拟页面中的触点位置的步骤包括：

在所述显示的虚拟页面中分别采集触摸起始点和滑动采样点所对应的触点位置；

所述采集所述显示的虚拟页面中的触点位置的步骤之后还包括：

根据所述触摸起始点和滑动采样点所对应的触点位置在翻页标记中赋予前翻标记值或后翻标记值。

5.根据权利要求3或4所述的切换页面的方法，其特征在于，所述根据所述触点位置对所述触摸屏中显示的虚拟页面进行翻页处理的步骤包括：

通过画布将所述翻页标记对应的页面内容承载于相应的虚拟页面；

对显示的虚拟页面和所述承载了翻页标记对应的页面内容的虚拟页面之间进行动态切换。

6.根据权利要求5所述的切换页面的方法，其特征在于，所述通过画布将所述翻页标记对应的页面内容承载于相应的虚拟页面的步骤包括：

在所述翻页标记对应的虚拟页面中创建画布；

从所述翻页标记对应的页面内容中读取字符，并判断所述读取的字符是否为换行符，若否，则进一步判断画布的行缓冲区中的字符长度是否达到屏幕宽度，若是，则

将所述行缓冲区中的字符绘制到画布，并累加所述画布的行数，若否，则

将所述读取的字符推入所述画布的行缓冲区。

7.根据权利要求6所述的切换页面的方法，其特征在于，所述将所述翻页标记对应的页面内容承载于相应的虚拟页面的步骤还包括：

判断到所述读取的字符为换行符，则进入所述将所述行缓冲区中的字符绘制到画布，并累加所述画布的行数的步骤。

8.根据权利要求6或7所述的切换页面的方法，其特征在于，所述累加所述画布的行数的步骤之后还包括：

判断所述画布的行数是否达到阈值，若是，则进入所述对显示的虚拟页面和所述承载了翻页标记对应的页面内容的虚拟页面之间进行动态切换的步骤，若否，则返回从所述翻页标记对应的页面内容中读取字符的步骤。

9.根据权利要求5所述的切换页面的方法，其特征在于，所述对显示的虚拟页面和所述承载了翻页标记对应的页面内容的虚拟页面之间进行动态切换的步骤包括：

根据所述触摸起始点和滑动采样点所对应的触点位置得到滑动偏移量，并通过所述滑动偏移量得到所述显示的虚拟页面和所述承载了翻页标记对应的页面内容的虚拟页面之间的变换属性；

获取过渡属性，并按照所述过渡属性和变换属性动态切换所述显示的虚拟页面和所述承载了翻页标记对应的页面内容的虚拟页面。

10.一种切换页面的装置，其特征在于，包括：

页面虚拟模块，用于通过页面脚本的加载创建若干个连续的虚拟页面，并显示于触摸屏中；

采集模块，用于采集所述显示的虚拟页面中的触点位置；

处理模块，用于根据所述触点位置对所述触摸屏中显示的虚拟页面进行翻页处理。

11.根据权利要求10所述的切换页面的装置，其特征在于，所述页面虚拟模块包括：

创建单元，用于通过页面脚本的加载触发创建若干个连续的虚拟页面，并将所述页面脚本中记录的页面内容承载于相应的虚拟页面中；

调整单元，用于调整所述虚拟页面，使所述虚拟页面与触摸屏相匹配；

显示单元，用于将所述承载页面内容的虚拟页面显示于触摸屏中，在所述触摸屏边缘的不可见区域并列排布与所述显示的虚拟页面相邻的虚拟页面。

12.根据权利要求10所述的切换页面的装置，其特征在于，还包括：

翻页判断模块，用于判断所述触点位置是否处于显示的虚拟页面的第一区域，若是，则在翻页标记中赋予前翻标记值，若否，则在翻页标记中赋予后翻标记值。

13.根据权利要求10所述的切换页面的装置，其特征在于，所述采集模块还用于在所述显示的虚拟页面中分别采集触摸起始点和滑动采样点所对应的触点位置；

所述装置还包括：

翻页标记模块，用于根据所述触摸起始点和滑动采样点所对应的触点位置在翻页标记中赋予前翻标记值或后翻标记值。

14.根据权利要求12或13所述的切换页面的装置，其特征在于，所述处理模块包括：

页面承载单元，用于通过画布将所述翻页标记对应的页面内容承载于相应的虚拟页面；

动态切换单元，用于对显示的虚拟页面和所述承载了翻页标记对应的页面内容的虚拟页面之间进行动态切换。

15.根据权利要求14所述的切换页面的装置，其特征在于，所述页面承载单元包括：

画布创建单元，用于在所述翻页标记对应的虚拟页面中创建画布；

读取单元，用于从所述翻页标记对应的页面内容中读取字符，并判断所述读取的字符是否为换行符，若否，则进一步判断画布的行缓冲区中的字符长度是否达到屏幕宽度，若是，则通知绘制单元，若否，则通知缓冲单元；

所述绘制单元用于将所述行缓冲区中的字符绘制到画布，并累加所述画布的行数；

所述缓冲单元用于将所述读取的字符推入所述画布的行缓冲区。

16.根据权利要求15所述的切换页面的装置，其特征在于，所述读取单元还用于判断到所述读取的字符为换行符则通知所述绘制单元。

17.根据权利要求15所述的切换页面的装置，其特征在于，所述绘制单元还用于判断所述画布的行数是否达到阈值，若是，则通知所述动态切换单元，若否，则通知所述读取单元。

18.根据权利要求14所述的切换页面的装置，其特征在于，所述动态切换单元包括：

偏移单元，用于根据所述触摸起始点和滑动采样点所对应的触点位置得到滑动偏移量，并通过所述滑动偏移量得到所述显示的虚拟页面和所述承载了翻页标记对应的页面内容的虚拟页面之间的变换属性；

页面切换单元，用于获取过渡属性，并按照所述过渡属性和变换属性动态切换所述显示的虚拟页面和所述承载了翻页标记对应的页面内容的虚拟页面。

Images