发明内容
针对现有技术中的图片浏览方法用户使用体验不佳的技术问题,本发明公开了一种基于移动端浏览器跨平台人机交互浏览图片的方法。
本发明的发明目的通过下述技术方案来实现:
一种基于移动端浏览器跨平台人机交互浏览图片的方法,其具体包括以下的步骤:步骤一、获取需要浏览的图片;步骤二、获取需要浏览的第一张图片的宽度、高度以及当前使用的移动端的显示屏显示区的宽度和高度,以显示屏显示区的宽度和高度为基础,将图片进行放大或者缩小,使得图片充满整个显示屏显示区;步骤三、屏幕接收手指或者其他触控在屏幕上的滑动后,根据手指的移动方向和距离计算出下一张需要显示的图片的尺寸和位置,并随着手指或者其他触控在屏幕上的滑动,逐渐将下一张需要显示的图片拖行到显示屏的显示区,下一张图片同样以显示屏显示区的宽度和高度为基础,将图片进行移动,使得第二张图片逐渐充满整个显示屏显示区,而上一张图片则逐渐等比例缩小,直到下一张需要显示的图片布满整个显示屏的显示区。
更进一步地,上述逐渐将下一张需要显示的图片拖行到显示屏的显示区的具体过程为:设定第一张图片缩放后正好铺满整个显示屏显示区,则第一张图片的四个角的坐标和显示屏显示区四个角的坐标相同,都是:(0,0),(w,0),(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*变化系数),第二张图片四个角的坐标在顺时针方向分别为: (0,h-offsetY),(w,h-offsetY),(w,h*变化系数-offsetY),(0,h*变化系数-offsetY);其中scale为缩放系数,offsetY表示滑动距离。
更进一步地,上述变化系数为2。
更进一步地,上述获取图片的宽度和高度的方式具体为利用javascript中Image对象设置其src为图片的地址,然后根据对应接口计算图片的宽度和高度。
更进一步地,上述获取图片的宽度和高度的方式具体为在服务器保存该图片时就记录下当前图片的宽度和高度,在移动端请求此图片数据时,一并将此部分数据发送给移动端。
更进一步地,上述需要浏览的图片为堆叠模式。
更进一步地,上述堆叠模式是指屏幕上显示第一张图片,其余的图片逐一堆叠,最下层的图片被次下层的图片所覆盖,依次类推,……,第二张图片被第一张图片所覆盖。
更进一步地,采用层叠样式表css将图片设置为堆叠模式。
更进一步地,上述获取需要浏览的图片的具体实现的过程为:使用超级文本标记语言html中的div标签来实现浏览图片的获取,首先设置浏览器的background-image属性地址为需要浏览的图片地址,并设置浏览器的background-size属性为100%,使图片根据div标签的大小自动缩放至相应大小,并利用层叠样式表css将图片设置为堆叠模式。
通过采用以上技术方案,本发明的有益效果是:本发明通过将图片进行缩放以适应显示屏显示区的大小,并在交互的过程中将上一张图片进行缩放,使得凸显下一张即将显示的图片,从而实现了各种图片(比如照片)通过浏览器实现跨平台的完美呈现,提高了用户的使用体验,最终实现出一种视差效果,提高了用户的使用满意度。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白,以下结合具体实施例,对本发明进行进一步详细的说明。应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不用于限定本发明。
一种基于移动端浏览器跨平台人机交互浏览图片的方法,其具体包括以下的步骤:
步骤一、获取需要浏览的图片,所述需要浏览的图片为堆叠模式(比如呈现出的整体效果就像一幅扑克牌整齐的堆叠在桌上,观察者在其上方观看只能看到最上面的一张扑克,要想看到下一张的扑克需要抽离第一张扑克),所述堆叠模式是指屏幕上显示第一张图片,其余的图片逐一堆叠,最下层的图片被次下层的图片所覆盖,依次类推,……,第二张图片被第一张图片所覆盖,当然此处图片的后台存放模式也可以是其他的模式,而不限于堆叠模式,只要第一张图片覆盖掉其他未显示的后台图片就可以。其获取需要浏览的图片的具体实现的过程为:使用超级文本标记语言html中的div标签来实现浏览图片的获取,首先设置浏览器的background-image属性地址为需要浏览的图片地址,并设置浏览器的background-size属性为100%,以便图片根据div标签的大小自动缩放至相应大小,并利用层叠样式表css将图片设置为堆叠模式。
步骤二、获取需要浏览的第一张图片的宽度、高度以及当前使用的移动端的显示屏显示区的宽度和高度,以显示屏显示区的宽度和高度为基础,将图片进行放大或者缩小,使得图片充满整个显示屏显示区。获取图片的宽度和高度可以利用javascript中Image对象设置其src为图片的地址,然后根据对应接口计算图片的宽度和高度。或者服务端在存储图片时就记录下当前图片的宽度和高度,在移动端请求此图片数据时,一并将此部分数据发送给移动终端。
有了原始图片的宽度和高度,此时再得到移动端显示屏显示区的宽度和高度,就可以以显示屏显示区的宽度和高度为基准将图片进行放大或者缩小,将图片进行等比缩放使之充满整个显示屏幕。以图片的宽度缩放到移动端显示屏显示区的宽度为例,图片高度的计算公式为:最终图片显示高度=显示屏显示区宽度/图片原始宽度*图片原始高度。
如图1所示的一张图片布满整个显示屏显示区的示意图。图片的四个角正好与显示屏显示区的四个角重合,以屏幕的左上角为坐标原点(0,0),按照顺时针方向,依次得出显示屏显示区四个角的坐标分别为: (0,0),(w,0),(w,h),(0,h),其中w表示显示屏显示区的宽度width,h表示显示屏显示区的高度high。假设第一张图片缩放后正好铺满整个显示屏显示区,则第一张图片的四个角的坐标和显示屏显示区四个角的坐标相同,也是:(0,0),(w,0),(w,h),(0,h)。此时可以设置第二张图片的四个角的坐标,如果第二张图片缩放后也正好可以铺满整个显示屏显示区,则第二张图片的坐标可以分别(0,h),(w,h),(w,h*2),(0,h*2),即第二张图片位于第一张图片的下方。
其余图片的四个角的坐标均为:(0,0),(w,0),(w,h),(0,h),即和第一张图片的坐标相同,但因为是堆叠放置,其均会被第一张图片所覆盖。第二张图片虽然没有被覆盖,但因为其坐标超出了显示屏显示的范围,因此操作者也是看不到的。
步骤三、屏幕接收手指或者其他触控在屏幕上的滑动后,根据手指的移动方向和距离计算出下一张需要显示的图片,并随着手指或者其他触控在屏幕上的滑动,逐渐将下一张需要显示的图片拖行到显示屏的显示区,下一张图片同样以显示屏显示区的宽度和高度为基础,将图片进行放大或者缩小,使得图片充满整个显示屏显示区,而上一张图片则逐渐还原到图片原始大小,直到下一张需要显示的图片布满整个显示屏的显示区。
假设将缩放系数设定为5,手指的滑动距离offsetY假设为100个像素。则在两张图片交互的过程中,
针对第一张图片:
"top":offsetY/scale*2,"left":offsetY/scale*2,"width":w-offsetY/scale,"height":h-offsetY/scale;其中"top"是指图片的上边界到显示屏显示区上边界的距离;"left"是指图片的左边界到显示屏显示区左边界的距离;"width"是指图片缩放后的宽度;"height"是指图片缩放后的高度。
针对第二张图片:
“top":h- offsetY,"left":0,"width":w,"height":h;其中“top"是指图片的上边界到显示屏显示区上边界的距离;"left"是指图片的左边界到显示屏显示区左边界的距离,即左边是布满了整个屏幕显示区的;"width"是指图片缩放后的宽度,正好等于显示屏显示区的宽度;"height"是指图片缩放后的高度,正好等于显示屏显示区的高度。
如图2所示的第二张图片被向上拖行了一部分后的示意图,其中第二张图片的大小不变,仍保持与显示屏显示区大小一致,向上拖行后,第二张图片覆盖在第一张图片上面,显示屏显示区的上半部分显示第一张图片,显示屏显示屏显示区的下半部分显示第二张图片,而在这个第二张图片逐渐覆盖第一张图片的过程中,第一张图片逐渐缩小,直到第二张图片完全覆盖整个显示屏的显示区,此时笫二张图片的与显示屏的显示区重合,显示屏的显示区回到如图1所示的界面。
那么,在第二张图片的拖行过程中,第一张图片的四个角的坐标(顺时针)分别为:
(offsetY/scale*2,-offsetY/scale*2),(w-offsetY/scale*2,-offsetY/scale*2),(w-offsetY/scale*2,h-offsetY/scale*2),(offsetY/scale*2,h-offsetY/scale*2),第二张图片四个角的坐标 (顺时针)分别为: (0,h-offsetY),(w,h-offsetY),(w,h*2-offsetY),(0,h*2-offsetY);其中scale为缩放系数,offsetY表示滑动距离,2为任意设定的一个表征图片变化快慢的值,表征图片变化快慢的值要小于scale,即如果scale为5,那么这个值应大于0并小于5。
当第二张图片拖行了一部分时,如果操作者在此过程中停止交互(比如手指离开屏幕),则根据offsetY来计算,如果offsetY大于一定阈值(比如阈值可以可以设定为100像素)则认为是要翻到下一张图片,那么第一张图片和第二张图片的最终值为:第一张图片的四个角的坐标为 (0,-h),(w,-h),(w,0),(0,0),第二张图片的四个角的坐标为 (0,0),(w,0),(w,h),(0,h)。
如果offsetY小于100那么第一张和第二张图片分别回滚到之前的值,后续图片计算过程依次类推。
上述说明示出并描述了本发明的一个优选实施例,但如前所述,应当理解本发明并非局限于本文所披露的形式,不应看作是对其他实施例的排除,而可用于各种其他组合、修改和环境,并能够在本文所述发明构想范围内,通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围,则都应在本发明所附权利要求的保护范围内。