的显示区，下一张图片同样以显示屏显示区的宽度和高度为基础，将图片进行放大或者缩小，使得图片充满整个显示屏显示区，而上一张图片则逐渐还原到图片原始大小，直到下一张需要显示的图片布满整个显示屏的显示区。
[0023]假设将缩放系数设定为5，手指的滑动距离offsetY假设为100个像素。则在两张图片交互的过程中，
针对第一张图片:
〃top〃:offsetY/scale*2，〃left〃:offsetY/scale*2, 〃width〃:w-offsetY/scale, 〃height〃:h_offsetY/scale ;其中〃top〃是指图片的上边界到显示屏显示区上边界的距离；〃left〃是指图片的左边界到显示屏显示区左边界的距离；〃width〃是指图片缩放后的宽度；"height"是指图片缩放后的高度。
[0024]针对第二张图片:
“top〃:h_ offsetY, 〃left〃:0, 〃width〃:w, 〃height〃:h ;其中 “top"是指图片的上边界到显示屏显示区上边界的距离；〃left〃是指图片的左边界到显示屏显示区左边界的距离，即左边是布满了整个屏幕显示区的；〃width〃是指图片缩放后的宽度，正好等于显示屏显示区的宽度；"height 〃是指图片缩放后的高度，正好等于显示屏显示区的高度。
[0025]如图2所示的第二张图片被向上拖行了一部分后的示意图，其中第二张图片的大小不变，仍保持与显示屏显示区大小一致，向上拖行后，第二张图片覆盖在第一张图片上面，显示屏显示区的上半部分显示第一张图片，显示屏显示屏显示区的下半部分显示第二张图片，而在这个第二张图片逐渐覆盖第一张图片的过程中，第一张图片逐渐缩小，直到第二张图片完全覆盖整个显示屏的显示区，此时笫二张图片的与显示屏的显示区重合，显示屏的显示区回到如图1所示的界面。
[0026]那么，在第二张图片的拖行过程中，第一张图片的四个角的坐标(顺时针)分别为:
(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，那么这个值应大于O并小于5。
[0027]当第二张图片拖行了一部分时，如果操作者在此过程中停止交互(比如手指离开屏幕)，则根据offsetY来计算，如果offsetY大于一定阈值(比如阈值可以可以设定为100像素)则认为是要翻到下一张图片，那么第一张图片和第二张图片的最终值为:第一张图片的四个角的坐标为(0，_h)，(w, -h), (w, 0), (0，0)，第二张图片的四个角的坐标为(O, 0)，(W，0)，(w，h)，(O, h) O
[0028]如果offsetY小于100那么第一张和第二张图片分别回滚到之前的值，后续图片计算过程依次类推。
[0029]上述说明示出并描述了本发明的一个优选实施例，但如前所述，应当理解本发明并非局限于本文所披露的形式，不应看作是对其他实施例的排除，而可用于各种其他组合、修改和环境，并能够在本文所述发明构想范围内，通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围，则都应在本发明所附权利要求的保护范围内。
【主权项】
1.一种基于移动端浏览器跨平台人机交互浏览图片的方法，其具体包括以下的步骤:步骤一、获取需要浏览的图片；步骤二、获取需要浏览的第一张图片的宽度、高度以及当前使用的移动端的显示屏显示区的宽度和高度，以显示屏显示区的宽度和高度为基础，将图片进行放大或者缩小，使得图片充满整个显示屏显示区；步骤三、屏幕接收手指或者其他触控在屏幕上的滑动后，根据手指的移动方向和距离计算出下一张需要显示的图片，并随着手指或者其他触控在屏幕上的滑动，逐渐将下一张需要显示的图片拖行到显示屏的显示区，下一张图片同样以显示屏显示区的宽度和高度为基础，将图片进行移动，使得第二张图片逐渐充满整个显示屏显示区，而上一张图片则逐渐等比例缩小，直到下一张需要显示的图片布满整个显示屏的显示区。
2.如权利要求1所述的基于移动端浏览器跨平台人机交互浏览图片的方法，其特征在于所述逐渐将下一张需要显示的图片拖行到显示屏的显示区的具体过程为:设定第一张图片缩放后正好铺满整个显示屏显示区，则第一张图片的四个角的坐标和显示屏显示区四个角的坐标相同，都是:(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表示滑动距离，w表示显示屏显示区的宽度，h表示显示屏显示区的高度，所述变化系数小于缩放系数。
3.如权利要求2所述的基于移动端浏览器跨平台人机交互浏览图片的方法，其特征在于所述变化系数为2。
4.如权利要求1或者3所述的基于移动端浏览器跨平台人机交互浏览图片的方法，其特征在于所述获取图片的宽度和高度的方式具体为利用javascript中Image对象设置其src为图片的地址，然后根据对应接口计算图片的宽度和高度。
5.如权利要求1或者3所述的基于移动端浏览器跨平台人机交互浏览图片的方法，其特征在于所述获取图片的宽度和高度的方式具体为在服务器保存该图片时就记录下当前图片的宽度和高度，在移动端请求此图片数据时，一并将此部分数据发送给移动端。
6.如权利要求1或者3所述的基于移动端浏览器跨平台人机交互浏览图片的方法，其特征在于所述需要浏览的图片为堆叠模式。
7.如权利要求6所述的基于移动端浏览器跨平台人机交互浏览图片的方法，其特征在于所述堆叠模式是指屏幕上显示第一张图片，其余的图片逐一堆叠，最下层的图片被次下层的图片所覆盖，依次类推，……，第二张图片被第一张图片所覆盖。
8.如权利要求6所述的基于移动端浏览器跨平台人机交互浏览图片的方法，其特征在于采用层叠样式表css将图片设置为堆叠模式。
9.如权利要求1或者3所述的基于移动端浏览器跨平台人机交互浏览图片的方法，其特征在于所述获取需要浏览的图片的具体实现的过程为:使用超级文本标记语言html中的div标签来实现浏览图片的获取，首先设置浏览器的background-1mage属性地址为需要浏览的图片地址，并设置浏览器的background-size属性为100%，使图片根据div标签的大小自动缩放至相应大小，并利用层叠样式表css将图片设置为堆叠模式。
【专利摘要】本发明涉及移动设备浏览器技术领域，本发明公开了一种基于移动端浏览器跨平台人机交互浏览图片的方法，其具体包括以下的步骤：步骤一、获取需要浏览的图片；步骤二、获取需要浏览的第一张图片的宽度、高度以及当前使用的移动端的显示屏显示区的宽度和高度，以显示屏显示区的宽度和高度为基础，将图片进行放大或者缩小，使得图片充满整个显示屏显示区；步骤三、屏幕根据手指的移动方向和距离计算出下一张需要显示的图片，并随着手指或者其他触控在屏幕上的滑动，逐渐将下一张需要显示的图片拖行到显示屏的显示区，下一张图片同样以显示屏显示区的宽度和高度为基础，将图片进行放大或者缩小，使得第二张图片逐渐充满整个显示屏显示区。
【IPC分类】G06F3-0488, G06F3-0484
【公开号】CN104679432
【申请号】CN201510094889
【发明人】唐雷
【申请人】成都品果科技有限公司
【公开日】2015年6月3日
【申请日】2015年3月4日