一种基于移动端浏览器跨平台人机交互浏览图片的方法
【技术领域】
[0001]本发明涉及浏览器技术领域，尤其涉及一种基于移动端浏览器跨平台人机交互浏览图片的方法。
【背景技术】
[0002]目前在移动终端设备上已有很多种浏览图片的方式，比如针对一张图片，利用移动设备自带的多点触控技术对图片进行放大或缩小、或通过手势操作，根据操作者手势滑动方向对图片进行左右移动，从而浏览多张图片。但是这些操作方式出来的视觉效果要么固化在同一个系统中，要么仅限于某一种平台，即使是能跨平台，但实现效果和系统自带的效果差别不大，随着近几年社交网络的飞速发展，越来越多的人喜欢把自己喜爱的照片通过网络分享到各个社交应用，其他的用户则通过浏览器查看这些图片。但在浏览器上查看照片的方式一般比较单一，比如现有的将所有的照片在浏览器页面上进行固定的方法，用户通过滚动鼠标的方式实现逐一浏览，或者通过感知用户的手指滑动将照片逐一显示在移动终端的显示屏上，这样的浏览方式中图片的大小都是固定不变的，不管是向上滑动还是向下滑动，每个图都以原始保存的大小显示在显示屏上，这样的方法很显然无法提高用户图片观看的体验。
【发明内容】
[0003]针对现有技术中的图片浏览方法用户使用体验不佳的技术问题，本发明公开了一种基于移动端浏览器跨平台人机交互浏览图片的方法。
[0004]本发明的发明目的通过下述技术方案来实现:
一种基于移动端浏览器跨平台人机交互浏览图片的方法，其具体包括以下的步骤:步骤一、获取需要浏览的图片；步骤二、获取需要浏览的第一张图片的宽度、高度以及当前使用的移动端的显示屏显示区的宽度和高度，以显示屏显示区的宽度和高度为基础，将图片进行放大或者缩小，使得图片充满整个显示屏显示区；步骤三、屏幕接收手指或者其他触控在屏幕上的滑动后，根据手指的移动方向和距离计算出下一张需要显示的图片，并随着手指或者其他触控在屏幕上的滑动，逐渐将下一张需要显示的图片拖行到显示屏的显示区，下一张图片同样以显示屏显示区的宽度和高度为基础，将图片进行移动，使得第二张图片逐渐充满整个显示屏显示区，而上一张图片则逐渐等比例缩小，直到下一张需要显示的图片布满整个显示屏的显示区。
[0005]更进一步地，上述逐渐将下一张需要显示的图片拖行到显示屏的显示区的具体过程为:设定第一张图片缩放后正好铺满整个显示屏显示区，则第一张图片的四个角的坐标和显示屏显示区四个角的坐标相同，都是:(0，0)，(w, O), (w, h), (0,h);第二张图片的坐标分别(0,h), (w, h), (w，h*2)，(0，h*2);在第二张图片的拖行过程中，第一张图片的四个角的坐标在顺时针方向分别为:(offsetY/scale*变化系数，-offsetY/scale*变化系数),(w-offsetY/scale* 变化系数，-offsetY/scale* 变化系数),(w-offsetY/scale* 变化系数，h-offsetY/scale* 变化系数),(offsetY/scale* 变化系数，h-offsetY/scale* 变化系数)，第二张图片四个角的坐标在顺时针方向分别为:(O, h-offsetY), (w, h-offsetY)，(w, h*变化系数-offsetY), (O, h*变化系数-offsetY);其中scale为缩放系数，offsetY表示滑动距离。
[0006]更进一步地，上述变化系数为2。
[0007]更进一步地，上述获取图片的宽度和高度的方式具体为利用javascript中Image对象设置其src为图片的地址，然后根据对应接口计算图片的宽度和高度。
[0008]更进一步地，上述获取图片的宽度和高度的方式具体为在服务器保存该图片时就记录下当前图片的宽度和高度，在移动端请求此图片数据时，一并将此部分数据发送给移动端。
[0009]更进一步地，上述需要浏览的图片为堆叠模式。
[0010]更进一步地，上述堆叠模式是指屏幕上显示第一张图片，其余的图片逐一堆叠，最下层的图片被次下层的图片所覆盖，依次类推，……，第二张图片被第一张图片所覆盖。
[0011]更进一步地，采用层叠样式表CSS将图片设置为堆叠模式。
[0012]更进一步地，上述获取需要浏览的图片的具体实现的过程为:使用超级文本标记语言html中的div标签来实现浏览图片的获取，首先设置浏览器的background-1mage属性地址为需要浏览的图片地址，并设置浏览器的background-size属性为100%，使图片根据div标签的大小自动缩放至相应大小，并利用层叠样式表css将图片设置为堆叠模式。
[0013]通过采用以上技术方案，本发明的有益效果是:本发明通过将图片进行缩放以适应显示屏显示区的大小，并在交互的过程中将上一张图片进行缩放，使得凸显下一张即将显示的图片，从而实现了各种图片(比如照片)通过浏览器实现跨平台的完美呈现，提高了用户的使用体验，最终实现出一种视差效果，提高了用户的使用满意度。
【附图说明】
[0014]图1为一张图片布彳两整个显不屏显不区的不意图。
[0015]图2为第二张图片拖行了一部分到显示屏显示区的示意图。
【具体实施方式】
[0016]为了使本发明的目的、技术方案及优点更加清楚明白，以下结合具体实施例，对本发明进行进一步详细的说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
[0017]一种基于移动端浏览器跨平台人机交互浏览图片的方法，其具体包括以下的步骤:
步骤一、获取需要浏览的图片，所述需要浏览的图片为堆叠模式(比如呈现出的整体效果就像一幅扑克牌整齐的堆叠在桌上，观察者在其上方观看只能看到最上面的一张扑克，要想看到下一张的扑克需要抽离第一张扑克)，所述堆叠模式是指屏幕上显示第一张图片，其余的图片逐一堆叠，最下层的图片被次下层的图片所覆盖，依次类推，……，第二张图片被第一张图片所覆盖，当然此处图片的后台存放模式也可以是其他的模式，而不限于堆叠模式，只要第一张图片覆盖掉其他未显示的后台图片就可以。其获取需要浏览的图片的具体实现的过程为:使用超级文本标记语言html中的div标签来实现浏览图片的获取，首先设置浏览器的background-1mage属性地址为需要浏览的图片地址，并设置浏览器的background-size属性为100%，以便图片根据div标签的大小自动缩放至相应大小，并利用层叠样式表css将图片设置为堆叠模式。
[0018]步骤二、获取需要浏览的第一张图片的宽度、高度以及当前使用的移动端的显示屏显示区的宽度和高度，以显示屏显示区的宽度和高度为基础，将图片进行放大或者缩小，使得图片充满整个显示屏显示区。获取图片的宽度和高度可以利用javascript中Image对象设置其src为图片的地址，然后根据对应接口计算图片的宽度和高度。或者服务端在存储图片时就记录下当前图片的宽度和高度，在移动端请求此图片数据时，一并将此部分数据发送给移动终端。
[0019]有了原始图片的宽度和高度，此时再得到移动端显示屏显示区的宽度和高度，就可以以显示屏显示区的宽度和高度为基准将图片进行放大或者缩小，将图片进行等比缩放使之充满整个显示屏幕。以图片的宽度缩放到移动端显示屏显示区的宽度为例，图片高度的计算公式为:最终图片显示高度=显示屏显示区宽度/图片原始宽度*图片原始高度。
[0020]如图1所示的一张图片布满整个显示屏显示区的示意图。图片的四个角正好与显示屏显示区的四个角重合，以屏幕的左上角为坐标原点(0，O)，按照顺时针方向，依次得出显示屏显示区四个角的坐标分别为:(0，O), (W，O), (w，h), (0，h)，其中w表示显示屏显示区的宽度width，h表示显示屏显示区的高度high。假设第一张图片缩放后正好铺满整个显示屏显示区，则第一张图片的四个角的坐标和显示屏显示区四个角的坐标相同，也是:(0，0)，(w, O), (w, h), (O, h) ο此时可以设置第二张图片的四个角的坐标，如果第二张图片缩放后也正好可以满整个显示屏显示区，则第二张图片的坐标可以分别(0,h), (w, h), (w，h*2)，(0，h*2)，即第二张图片位于第一张图片的下方。
[0021]其余图片的四个角的坐标均为:(0，O)，(w, O), (w, h), (0，h)，即和第一张图片的坐标相同，但因为是堆叠放置，其均会被第一张图片所覆盖。第二张图片虽然没有被覆盖，但因为其坐标超出了显示屏显示的范围，因此操作者也是看不到的。
[0022]步骤三、屏幕接收手指或者其他触控在屏幕上的滑动后，根据手指的移动方向和距离计算出下一张需要显示的图片，并随着手指或者其他触控在屏幕上的滑动，逐渐将下一张需要显示的图片拖行到显示屏