[发明专利]一种基于移动端浏览器跨平台人机交互浏览图片的方法

摘要

本发明涉及移动设备浏览器技术领域，本发明公开了一种基于移动端浏览器跨平台人机交互浏览图片的方法，其具体包括以下的步骤步骤一、获取需要浏览的图片；步骤二、获取需要浏览的第一张图片的宽度、高度以及当前使用的移动端的显示屏显示区的宽度和高度，以显示屏显示区的宽度和高度为基础，将图片进行放大或者缩小，使得图片充满整个显示屏显示区；步骤三、屏幕根据手指的移动方向和距离计算出下一张需要显示的图片，并随着手指或者其他触控在屏幕上的滑动，逐渐将下一张需要显示的图片拖行到显示屏的显示区，下一张图片同样以显示屏显示区的宽度和高度为基础，将图片进行放大或者缩小，使得第二张图片逐渐充满整个显示屏显示区。

主权项

一种基于移动端浏览器跨平台人机交互浏览图片的方法，其具体包括以下的步骤：步骤一、获取需要浏览的图片；步骤二、获取需要浏览的第一张图片的宽度、高度以及当前使用的移动端的显示屏显示区的宽度和高度，以显示屏显示区的宽度和高度为基础，将图片进行放大或者缩小，使得图片充满整个显示屏显示区；步骤三、屏幕接收手指或者其他触控在屏幕上的滑动后，根据手指的移动方向和距离计算出下一张需要显示的图片的尺寸和位置，并随着手指或者其他触控在屏幕上的滑动，逐渐将下一张需要显示的图片拖行到显示屏的显示区，下一张图片同样以显示屏显示区的宽度和高度为基础，将图片进行移动，使得第二张图片逐渐充满整个显示屏显示区，而上一张图片则逐渐等比例缩小，直到下一张需要显示的图片布满整个显示屏的显示区，所述逐渐将下一张需要显示的图片拖行到显示屏的显示区的具体过程为：设定第一张图片缩放后正好铺满整个显示屏显示区，则第一张图片的四个角的坐标和显示屏显示区四个角的坐标相同，都是:(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表示滑动距离，w表示显示屏显示区的宽度，h表示显示屏显示区的高度，所述变化系数小于缩放系数。