CN104077040A - 在wap页面进行大图切换的方法、装置及触摸屏设备 - Google Patents

Abstract

本发明适用于计算机技术领域，提供了在wap页面进行大图切换的方法、装置及触摸屏设备，所述方法包括：在当前大图显示页面检测列表交互图层显示指令，根据所述列表交互图层显示指令在当前大图显示页面显示列表交互图层；在所述列表交互图层检测图片类别切换指令,根据所述图片类别切换指令从当前大图显示页面切换至所述图片类别切换指令对应的图片类别中指定图片的大图显示页面。本发明，不离开当前wap界面通过简单操作实现了不同类别列表大图的切换。

Description

在wap页面进行大图切换的方法、装置及触摸屏设备

技术领域

本发明属于计算机技术领域，尤其涉及在wap页面进行大图切换的方法、装置及触摸屏设备。

背景技术

目前，触摸屏设备对于无线应用协议（Wireless Application Protocol，WAP）类图片的展示方式仍以传统的单一列表样式，即所有类别的图片均在一个列表中，对于不同类别列表的图片切换时需要返回到列表页面，重新进入一个新类别列表的wap图片页面。现有在wap页面进行大图切换的方法对于当对图片进行了分类,用户选择某种类型的图片,进入到大图展示页面后,如果要采用大图的方式浏览另一分类中的图片时,需要先返回到图片类别列表页面,从中选择一个图片后,再跳转至该图片对应的大图展示页面,不同类别列表的大图之间切换操作复杂。

发明内容

本发明实施例提供了在wap页面进行大图切换的方法、装置及触摸屏设备，旨在解决现有在wap页面进行大图切换的方法存在不同类别列表大图之间切换操作复杂的问题。

一方面，提供一种在wap页面进行大图切换的方法，所述方法包括：

在当前大图显示页面检测列表交互图层显示指令，根据所述列表交互图层显示指令在当前大图显示页面显示列表交互图层；

在所述列表交互图层检测图片类别切换指令,根据所述图片类别切换指令从当前大图显示页面切换至所述图片类别切换指令对应的图片类别中指定图片的大图显示页面。

另一方面，提供一种在wap页面进行大图切换的装置，所述装置包括：

列表显示单元，用于在当前大图显示页面检测列表交互图层显示指令，根据所述列表交互图层显示指令在当前大图显示页面显示列表交互图层；

类别切换单元，用于在所述列表交互图层检测图片类别切换指令,根据所述图片类别切换指令从当前大图显示页面切换至所述图片类别切换指令对应的图片类别中指定图片的大图显示页面。

再一方面，提供一种触摸屏设备，所述触摸屏设备包括如上所述的在wap页面进行大图切换的装置。

在本发明实施例，在当前大图显示页面检测列表交互图层显示指令，根据所述列表交互图层显示指令在当前大图显示页面显示列表交互图层；在所述列表交互图层检测图片类别切换指令,根据所述图片类别切换指令从当前大图显示页面切换至所述图片类别切换指令对应的图片类别中指定图片的大图显示页面，本发明，不离开当前wap界面通过简单操作实现了不同类别列表大图的切换。

附图说明

图1是本发明实施例一提供的在wap页面进行大图切换的方法的流程图；

图2是本发明实施例一提供的三种wap页面模式示意图；

图3是本发明实施一例提供的大图的切换方法的交互过程示意图；

图4是本发明实施例二提供的在wap页面进行大图切换的方法的流程图；

图5是本发明实施例二提供的在wap页面进行大图切换的方法的一适用场景；

图6是本发明实施例三提供的在wap页面进行大图切换的方法的一适用场景；

图7是本发明实施例四提供的在wap页面进行大图切换的装置的结构图；

图8是本发明实施例五提供的在wap页面进行大图切换的装置的结构图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

在本发明实施例中，在当前大图显示页面检测列表交互图层显示指令，根据所述列表交互图层显示指令在当前大图显示页面显示列表交互图层；在所述列表交互图层检测图片类别切换指令,根据所述图片类别切换指令从当前大图显示页面切换至所述图片类别切换指令对应的图片类别中指定图片的大图显示页面。

以下结合具体实施例对本发明的实现进行详细描述：

实施例一

图1示出了本发明实施例一提供的在wap页面进行大图切换的方法的实现流程，详述如下：

需要说明的是，本实施例和以下所有实施例及优选方案适用于iphone、android及其他移动终端平台。

在步骤S101中，在当前大图显示页面检测列表交互图层显示指令，根据所述列表交互图层显示指令在当前大图显示页面显示列表交互图层。

在本实施例中，所述当前大图显示页面为展示大图的无线应用协议（Wireless Application Protocol，WAP）页面。所述列表交互图层用于显示多个图片类别，当前大图显示页面可以隐藏列表交互图层，如在切换到指定大图展示页面后，同输入隐藏指令隐藏列表交互图层，或者在切换后就自动隐藏列表交互图层，或者在切换到指定页面多长时间后，自动隐藏列表交互图层。优选的，所述列表交互图层覆盖于当前大图显示页面中的图片展示区域的底部。所述列表交互图层显示指令用于呼出列表交互图层。触摸屏设备判断在当前大图显示页面是否检测到列表交互图层显示指令，如果检测到显示指令，则在当前大图显示页面显示列表交互图层，如果没有检测到显示指令，则继续检测列表交互图层显示指令。

优选的，所述列表交互图层包括第一展示状态和第二展示状态，其中所述第一展示状态为在所述列表交互图层显示所有图片类别的状态，如图2a所示，显示了4个图片类别a，其中，外观为当前大图的图片类别。所述第二展示状态为在所述列表交互图层显示当前大图显示页面上显示的图片所属的图片类别的状态。

优选的，所述根据所述列表交互图层显示指令在当前大图显示页面显示列表交互图层具体包括：

根据所述列表交互图层显示指令在当前大图显示页面以所述第一展示状态显示所述列表交互图层。

优选的，当前大图显示页面还可以包括图片状态栏，所述图片状态栏用于显示图片展示区域显示的当前图片对应产品的属性信息。所述属性信息包括但不限于产品名称、类别名称、该类别对应图片总数和当前大图显示页面中的图片在该类别图片中的序号。触摸屏设备还可以在所述当前大图显示页面检测状态栏显示指令，根据所述状态栏显示指令在所述当前大图显示页面显示图片状态栏。

具体的，所述图片状态栏显示指令用于在当前大图显示页面呼出图片状态栏。优选的，所述图片状态栏显示指令设置为与列表交互图层显示指令相同的指令，这样可以通过一个指令，同时呼出图片状态栏和列表交互图层。

优选的，如果检测到图片展示区域的前向切换指令或者后向切换指令，如长滑指令，则显示当前大图显示页面中的图片的前一个图片或者后一个图片。

在步骤S102中，在所述列表交互图层检测图片类别切换指令,根据所述图片类别切换指令从当前大图显示页面切换至所述图片类别切换指令对应的图片类别中指定图片的大图显示页面。

在本实施例中，所述图片类别切换指令用于当前大图显示页面中以大图形式显示的不同类别的图片之间进行切换。触摸屏设备判断在所述列表交互图层是否接收到图片类别切换指令,如果在所述列表交互图层接收到图片类别切换指令,根据所述图片类别切换指令从当前大图显示页面切换至所述图片类别切换指令对应的图片类别中指定图片的大图显示页面，即图片展示区域切换显示所述图片类别切换指令对应的图片类别中指定图片，优选的，所述指定图片为所述图片类别的首张图片。

其中，以wap界面的“雅绅特”汽车图片为具体目标对象描述本实施例的适用场景，进行描述如下：

如图3所示，“雅绅特”汽车图片分为重点、外观、内饰和其他四个类别，wap界面的图片展示区域显示当前图片，图片状态栏显示当前图片展示区域显示图片的产品名称、所属类别、该图片在这种类别列表的排序和该类别列表图片总数以及图片的显示状态等信息；列表交互图层显示了四个图片类别列表选项，其标题分别为重点、外观、内饰和其他，和一个中心点按钮，在页面状态A下，列表交互图层处于第一展示状态，接收选中类别列表选项内饰对应的点击指令，读取内饰类别列表中的首个图片进行展示，更新图片展示区域和图片状态栏的显示，在列表交互图层将所述选中类别列表选项内饰作为当前类别列表选项，图片展示区域从外观的第二张图片切换到内饰的首个图片，进入页面状态A1，或者接收列表交互图层的当前类别列表选项对应的点击指令，调整列表交互图层的显示，使其只显示当前类别列表选项，图片展示区域和图片状态栏显示内容不变，由页面状态A或A1进入页面状态C或C1,在页面状态C或C1下，接收列表交互图层当前类别列表选项对应的点击指令，在列表交互图层绘制了四个类别列表选项和一个中心点按钮，恢复到页面状态A。

图3还展示了同一图片的不同展示状态切换过程，在页面状态A下，接收图片展示区域的点击指令，隐藏图片状态栏和列表交互图层，扩展图片展示区域，切换到页面状态B；在页面状态B下，接收点击指令，在wap界面顶端和低端分别绘制图片展示区域和列表交互图层，切换到页面状态A；在页面状态C下，接收到图片展示区域的点击指令时，隐藏图片状态栏和列表交互图层，扩展图片展示区域，进入页面状态B。

本实施例，可以达到不离开当前wap界面完成至少一个类别列表大图的切换，切换界面呼出容易，切换操作简单，切换过程快捷，极大的提高了用户的使用体验。

实施例二

图4示出了本发明实施例二提供的在wap页面进行大图切换的方法的实现流程，详述如下：

在步骤S401中，在当前大图显示页面检测列表交互图层显示指令，根据所述列表交互图层显示指令在当前大图显示页面显示列表交互图层。

在本实施例中，步骤S401的执行和上述实施例一中的步骤S101的执行过程类似，详情参见上述实施例一的描述。

在步骤S402中，在接收到状态切换指令时，所述列表交互图层以动画形式在所述第一展示状态和所述第二展示状态之间进行切换。

具体的，所述动画包括第一预设动画和第二预设动画，其中，所述第一预设动画是用于展示列表交互图层的第一展示状态到第二展示状态的切换过程，其中，第一预设动画通过所述当前wap页面的列表交互图层通过层叠样式表（Cascading Styleshee，CSS3）属性来完成，因为图片状态栏和列表交互图层的高度都是固定的，所以没有JS的计算量，直接通过CSS3类定义位移，用js在隐藏的时候改变类名称即可；所述第二预设动画是用于展示列表交互图层的第二展示状态到第一展示状态的切换过程，其中，第二预设动画的实现步骤分为三部分：第一，当前类别列表选项自转；第二，列表交互图层的中心位移到预设点；第三，全部类别列表选项由预设点散开到预设角度。

上述状态切换过程均通过CSS3技术来实现图片展示区域大图的移动来完成交互过程和动画过程，使得整个切换过程更加流畅。

在步骤S403中，在所述列表交互图层检测图片类别切换指令,根据所述图片类别切换指令从当前大图显示页面切换至所述图片类别切换指令对应的图片类别中指定图片的大图显示页面。

在本实施例中，步骤S403的执行和上述实施例一中的步骤S102的执行过程类似，详情参见上述实施例一的描述。

其中，以wap界面的“奥迪Q5”汽车图片为具体目标对象描述本实施例的适用场景，进行描述如下：

如图5所示，wap界面展示“奥迪Q5”汽车图片，列表交互图层显示重点、外观、内饰和其他的四个类别列表选项，当前类别列表选项是内饰，当用户点击内饰时，触摸屏设备接收当前类别列表选项对应的点击指令，类别列表选项的类别列表名称消失，且其他类别列表选项沿着运动轨迹自转加滚动移到当前类别列表选项位置，同时出现轨迹线，轨迹线上白光点沿着以较慢速度滑至当前类别列表选项位置，等白光点移至当前类别列表选项，白光点和轨迹线均渐隐消失，当前类别列表选项自转加滚动向底部类别列表中心点按钮位置移动，移动到类别列表中心点按钮位置时，遮挡类别列表中心点按钮，图片展示区域显示内容切换至当前类别列表选项的第一张图片，同时更新图片状态栏的属性信息。

实施例三

图6示出了本发明实施例三提供的wap页面大图的切换方法的另一具体适用场景，详述如下：

其中，以wap界面的“奥迪Q5”汽车图片为具体目标对象描述本实施例的适用场景，进行描述如下：

如图6所示，wap界面展示“奥迪Q5”汽车图片，列表交互图层显示重点、外观、内饰和其他的四个类别列表选项，当前类别列表选项的名称是重点，当用户点击重点时，触摸屏设备接收到当前类别列表选项对应的点击指令，在预设半径的半圆上将当前类别列表选项向外圆传播，同时出现传播轨迹，其他类别列表选项从当前类别列表选项为起点沿半圆轨迹带自转扩散出去，同时轨迹上也有白光点以稍慢的速度沿着相同轨迹滑动至轨迹尾端消失，其他类别列表选项在目标位置自旋转至预设位置，同时轨迹线渐隐消失，类别列表选项文字出现，列表交互图层恢复到显示所有类别列表选项。

实施例四

图7示出了本发明实施例四提供的在wap页面进行大图切换的装置的具体结构框图，为了便于说明，仅示出了与本发明实施例相关的部分。在本实施例中，该在wap页面进行大图切换的装置包括：列表显示单元71、类别切换单元72和状态栏显示单元73。

其中,列表显示单元71，用于在当前大图显示页面检测列表交互图层显示指令，根据所述列表交互图层显示指令在当前大图显示页面显示列表交互图层；

类别切换单元72，用于在所述列表交互图层检测图片类别切换指令,根据所述图片类别切换指令从当前大图显示页面切换至所述图片类别切换指令对应的图片类别中指定图片的大图显示页面。

进一步的，所述列表交互图层包括第一展示状态和第二展示状态，所述第一展示状态为在所述列表交互图层显示所有图片类别的状态，所述第二展示状态为在所述列表交互图层显示当前大图显示页面上显示的图片所属的图片类别的状态。

进一步的，所述列表显示单元71具体用于根据所述列表交互图层显示指令在当前大图显示页面以所述第一展示状态显示所述列表交互图层。

进一步的，所述装置还包括：

状态栏显示单元73，用于在所述当前大图显示页面检测状态栏显示指令，根据所述状态栏显示指令在所述当前大图显示页面显示图片状态栏。

本发明实施例提供的在wap页面进行大图切换的装置可以应用在前述对应的方法实施例一中，详情参见上述实施例一的描述，在此不再赘述。

实施例五

图8示出了本发明实施例五提供的在wap页面进行大图切换的装置的具体结构框图，为了便于说明，仅示出了与本发明实施例相关的部分。在本实施例中，该在wap页面进行大图切换的装置包括：列表显示单元81、类别切换单元82、状态栏显示单元83和状态切换单元84。

其中,列表显示单元81，用于在当前大图显示页面检测列表交互图层显示指令，根据所述列表交互图层显示指令在当前大图显示页面显示列表交互图层；

类别切换单元82，用于在所述列表交互图层检测图片类别切换指令,根据所述图片类别切换指令从当前大图显示页面切换至所述图片类别切换指令对应的图片类别中指定图片的大图显示页面。

进一步的，所述列表交互图层包括第一展示状态和第二展示状态，所述第一展示状态为在所述列表交互图层显示所有图片类别的状态，所述第二展示状态为在所述列表交互图层显示当前大图显示页面上显示的图片所属的图片类别的状态。

进一步的，所述列表显示单元81具体用于根据所述列表交互图层显示指令在当前大图显示页面以所述第一展示状态显示所述列表交互图层。

进一步的，所述装置还包括：

状态切换单元84，用于在接收到状态切换指令时，所述列表交互图层以动画形式在所述第一展示状态和所述第二展示状态之间进行切换。

进一步的，所述装置还包括：

状态栏显示单元83，用于在所述当前大图显示页面检测状态栏显示指令，根据所述状态栏显示指令在所述当前大图显示页面显示图片状态栏。

本发明实施例提供的在wap页面进行大图切换的装置可以应用在前述对应的方法实施例二中，详情参见上述实施例二的描述，在此不再赘述。

值得注意的是，上述系统实施例中，所包括的各个单元只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。

另外，本领域普通技术人员可以理解实现上述各实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，相应的程序可以存储于一计算机可读取存储介质中，所述的存储介质，如ROM/RAM、磁盘或光盘等。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (11)

1.一种在无线应用协议wap页面进行大图切换的方法，其特征在于，所述方法包括：

在当前大图显示页面检测列表交互图层显示指令，根据所述列表交互图层显示指令在当前大图显示页面显示列表交互图层；

在所述列表交互图层检测图片类别切换指令,根据所述图片类别切换指令从当前大图显示页面切换至所述图片类别切换指令对应的图片类别中指定图片的大图显示页面。

2.如权利要求1所述的方法，其特征在于，所述列表交互图层包括第一展示状态和第二展示状态，所述第一展示状态为在所述列表交互图层显示所有图片类别的状态，所述第二展示状态为在所述列表交互图层显示当前大图显示页面上显示的图片所属的图片类别的状态。

3.如权利要求2所述的方法，其特征在于，所述根据所述列表交互图层显示指令在当前大图显示页面显示列表交互图层具体包括：

根据所述列表交互图层显示指令在当前大图显示页面以所述第一展示状态显示所述列表交互图层。

4.如权利要求2所述的方法，其特征在于，在所述根据所述列表交互图层显示指令在当前大图显示页面显示列表交互图层之后，所述方法还包括：

在接收到状态切换指令时，所述列表交互图层以动画形式在所述第一展示状态和所述第二展示状态之间进行切换。

5.如权利要求1所述的方法，其特征在于，所述方法还包括：

在所述当前大图显示页面检测状态栏显示指令，根据所述状态栏显示指令在所述当前大图显示页面显示图片状态栏。

6.一种在无线应用协议wap页面进行大图切换的装置，其特征在于，其特征在于，所述装置包括：

列表显示单元，用于在当前大图显示页面检测列表交互图层显示指令，根据所述列表交互图层显示指令在当前大图显示页面显示列表交互图层；

类别切换单元，用于在所述列表交互图层检测图片类别切换指令,根据所述图片类别切换指令从当前大图显示页面切换至所述图片类别切换指令对应的图片类别中指定图片的大图显示页面。

7.如权利要求6所述的装置，其特征在于，所述列表交互图层包括第一展示状态和第二展示状态，所述第一展示状态为在所述列表交互图层显示所有图片类别的状态，所述第二展示状态为在所述列表交互图层显示当前大图显示页面上显示的图片所属的图片类别的状态。

8.如权利要求7所述的装置，其特征在于，所述列表显示单元具体用于根据所述列表交互图层显示指令在当前大图显示页面以所述第一展示状态显示所述列表交互图层。

9.如权利要求7所述的装置，其特征在于，所述装置还包括：

状态切换单元，用于在接收到状态切换指令时，所述列表交互图层以动画形式在所述第一展示状态和所述第二展示状态之间进行切换。

10.如权利要求6所述的装置，其特征在于，所述装置还包括：

状态栏显示单元，用于在所述当前大图显示页面检测状态栏显示指令，根据所述状态栏显示指令在所述当前大图显示页面显示图片状态栏。

11.一种触摸屏设备，其特征在于，所述触摸屏设备包括权利要求6至10任一项所述的在wap页面进行大图切换的装置。