CN104679432B - A method based on a mobile terminal browser, cross-platform computer interaction browse pictures - Google Patents

A method based on a mobile terminal browser, cross-platform computer interaction browse pictures Download PDF

Info

Publication number
CN104679432B
CN104679432B CN 201510094889 CN201510094889A CN104679432B CN 104679432 B CN104679432 B CN 104679432B CN 201510094889 CN201510094889 CN 201510094889 CN 201510094889 A CN201510094889 A CN 201510094889A CN 104679432 B CN104679432 B CN 104679432B
Authority
CN
Grant status
Grant
Patent type
Prior art keywords
picture
image
display
height
width
Prior art date
Application number
CN 201510094889
Other languages
Chinese (zh)
Other versions
CN104679432A (en )
Inventor
唐雷
Original Assignee
成都品果科技有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Grant date

Links

Abstract

本发明涉及移动设备浏览器技术领域,本发明公开了一种基于移动端浏览器跨平台人机交互浏览图片的方法,其具体包括以下的步骤:步骤一、获取需要浏览的图片;步骤二、获取需要浏览的第一张图片的宽度、高度以及当前使用的移动端的显示屏显示区的宽度和高度,以显示屏显示区的宽度和高度为基础,将图片进行放大或者缩小,使得图片充满整个显示屏显示区;步骤三、屏幕根据手指的移动方向和距离计算出下一张需要显示的图片,并随着手指或者其他触控在屏幕上的滑动,逐渐将下一张需要显示的图片拖行到显示屏的显示区,下一张图片同样以显示屏显示区的宽度和高度为基础,将图片进行放大或者缩小,使得第二张图片逐渐充满整个显示屏显示区。 Technical Field The present invention relates to a mobile device browser, the present invention discloses a method for a mobile terminal based on cross-platform browser interactive browsing of images, which comprises the steps of: a step of acquiring images to be viewed; step two, Get the width and height of the first image to be viewed in the display area display width, height, and a mobile terminal currently in use, the display width and height of the display region, based on the picture enlarged or reduced, so that the picture fills the screen display area; step three, the screen according to a movement direction and distance of the finger of the next image to be displayed, and as the finger or other touch slide on the screen, a need to gradually lower picture shows dragging line to the screen display area, to display the same picture width and height of the display area, based on the picture enlarged or reduced, such that the second image gradually fills the entire screen display area.

Description

一种基于移动端浏览器跨平台人机交互浏览图片的方法 A method based on a mobile terminal browser, cross-platform computer interaction browse pictures

技术领域 FIELD

[0001]本发明涉及浏览器技术领域,尤其涉及一种基于移动端浏览器跨平台人机交互浏览图片的方法。 [0001] The present invention relates to the technical field of the browser, and more particularly relates to a method for cross-platform mobile client browser-based interactive image browsing.

背景技术 Background technique

[0002]目前在移动终端设备上已有很多种浏览图片的方式,比如针对一张图片,利用移动设备自带的多点触控技术对图片进行放大或缩小、或通过手势操作,根据操作者手势滑动方向对图片进行左右移动,从而浏览多张图片。 [0002] At present, a variety of browse pictures on the mobile terminal device mode, for example, a picture, with the mobile device comes with multi-touch technology to enlarge or reduce images, or by a gesture operation, in accordance with the operator gesture sliding direction to move the picture around, so browse multiple pictures. 但是这些操作方式出来的视觉效果要么固化在同一个系统中,要么仅限于某一种平台,即使是能跨平台,但实现效果和系统自带的效果差别f大,随着近几年社交网络的飞速发展,越来越多的人喜欢把自己喜爱的照片通过网络分享到各个社交应用,其他的用户则通过浏览器查看这些图片。 But these operations out of the way visual effects are either cured in the same system, or a platform-only certain, even cross-platform, but to achieve big effects and the effect of the system comes with differences f, as in recent years, social networks rapid development, more and more people like to put their favorite photos through the network to share various social applications, other users will see these pictures through a browser. 但在浏览器上查看照片的方式一般比较单一,比如现有的将所有的照片在浏览器页面上进行固定的方法,用户通过滚动鼠标的方式实现逐一浏览,或者通过感知用户的手指滑动将照片逐一显示在移动终端的显示屏上,这样的浏览方式中图片的大小都是固定不变的,不管是向上滑动还是向下滑动,每个图都以原始保存的大小显示在显示屏上,这样的方法很显然无法提高用户图片观看的体验。 But to view photos on the way the browser is generally relatively simple, such as all the existing method of fixing the pictures on the browser page, users browse by scrolling the mouse implement one by one way or by sensing the user's finger sliding photos one by one on the display screen of the mobile terminal, so that the size of the image browsing mode is fixed, either up or slide down the slide, are each shown in FIG save the original size of the display screen, so that it is clear that the method can not improve the user experience of viewing pictures.

发明内容 SUMMARY

[0003]针对现有技术中的图片浏览方法用户使用体验不佳的技术问题,本发明公开了一种基于移动端浏览器跨平台人机交互浏览图片的方法。 [0003] Users browsing method in the prior art pictures poor experience technical problems, the present invention discloses a method based on a mobile terminal browser, cross-platform view pictures of human-computer interaction.

[0004]本发明的发明目的通过下述技术方案来实现: [0004] The object of the invention is achieved by the present invention the following technical scheme:

[0005] —种基于移动端浏览器跨平台人机交互浏览图片的方法,其具体包括以下的步骤:步骤一、获取需要浏览的图片;步骤二、获取需要浏览的第一张图片的宽度、高度以及当前使用的移动端的显示屏显示区的宽度和高度,以显示屏显示区的宽度和高度为基础,将图片进行放大或者缩小,使得图片充满整个显示屏显示区;步骤三、屏幕接收手指或者其他触控在屏幕上的滑动后,根据手指的移动方向和距离计算出下一张需要显示的图片的尺寸和位置,并随着手指或者其他触控在屏幕上的滑动,逐渐将下一张需要显示的图片拖行到显示屏的显示区,下一张图片同样以显示屏显示区的宽度和高度为基础,将图片进行移动, 使得第二张图片逐渐充满整个显示屏显示区,而上一张图片则逐渐等比例缩小,直到下一张需要显示的图片布满整个显示屏的显示区。 [0005] - Species Cross-based mobile internet browser terminal interactive image browsing method includes the following steps: step a, obtaining images to be viewed; two step, acquiring a first width of the need to browse the images, width and height of the display area and a display screen currently used by the mobile terminal, the display width and height of the display region, based on the picture enlarged or reduced, so that the image fills the entire screen display area; step three, the screen receiving fingers or other touch screen on the rear slide, the movement direction and distance of the finger's size and location of the picture to be displayed is calculated one, and as the finger or other touch screen on the slide, the next gradually Zhang image to be displayed dragged into the display area of ​​the display, the picture width and height of the display in the same display area, based on the moving picture, such that the second image gradually fills the entire display screen area, and Previous image gradually scaled down, until the next picture to be displayed covered the entire display area of ​​the display.

[0006]更进一步地,上述逐渐将下一张需要显示的图片拖行到显示屏的显示区的具体过程为:设定第一张图片缩放后正好铺满整个显示屏显示区,则第一张图片的四个角的坐标和显示屏显示区四个角的坐标相同,都是:(〇,〇) , (W,0),(w,h),(0,h);第二张图片的坐标分别(〇,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-〇ffsetY),(w,h-offsetY) , (w,h*变化系数-offsetY) , (0,h*变化系数-offsetY);其中scale为缩放系数,offsetY表不滑动距禺。 [0006] Furthermore, the above-described gradually display a required image process dragged to the specific area of ​​the display screen of the display: the first image is set just covered the entire screen display area of ​​the scaled, the first pictures of the four corners of the display screen and the coordinates of the four corners of the same region coordinates are: (square, square), (W, 0), (w, h), (0, h); second the image coordinates (square, h), (w, h), (w, h * 2), (0, h * 2); dragged during the second picture, the first picture of the four coordinate angle in the clockwise direction, respectively: (offsetY / scale * coefficient of variation, -offsetY / scale * coefficient of variation), (w-offsetY / scale * coefficient of variation, -offsetY / scale * coefficient of variation), (w-offsetY / scale * change coefficient, h- offsetY / scale * coefficient of variation), (offsetY / scale * change coefficient, h-offsetY / scale * coefficient of variation), the coordinates of the four corners of the second image in the clockwise direction, respectively: (0, h-〇ffsetY), (w, h-offsetY), (w, h * coefficient of variation -offsetY), (0, h * coefficient of variation -offsetY); where scale is a scaling factor, offsetY does not slide away from the table Yu. [0007] 更进一步地,上述变化系数为2。 [0007] Furthermore, the above-described coefficient of variation of 2.

[000S]更进一步地,上述获取图片的宽度和高度的方式具体为利用javascript中Image 对象设置其src为图片的地址,然后根据对应接口计算图片的宽度和高度。 [000s] Still further, the width and height of the above-described manner to obtain a picture of a specific set of images which src address using the Image javascript object, and then calculate the corresponding interface in accordance with image width and height.

[0009]更进一步地,上述获取图片的宽度和高度的方式具体为在服务器保存该图片时就记录下当前图片的宽度和高度,在移动端请求此图片数据时,一并将此部分数据发送给移动端。 When [0009] Further, images acquired width and height of the above-described manner in particular on the server to save the image recording width and height of the current picture, the moving picture data request this end, this portion of the data sent together with to the mobile terminal.

[0010]更进一步地,上述需要浏览的图片为堆叠模式。 [0010] Further, the above picture to be viewed as a stack mode.

[0011]更进一步地,上述堆叠模式是指屏幕上显示第一张图片,其余的图片逐一堆叠,最下层的图片被次下层的图片所覆盖,依次类推,……,第二张图片被第一张图片所覆盖。 [0011] Further, the display mode refers to said stacking first picture on the screen, the remaining images one by one are stacked, the lowermost layer of the lower layer picture is a picture times is covered, and so on, ......, the second picture is first covered by a picture. [0012]更进一步地,采用层叠样式表css将图片设置为堆叠模式。 [0012] Still further, the use of cascading style sheets css picture as the stack mode.

[0013]更进一步地,上述获取需要浏览的图片的具体实现的过程为:使用超级文本标记语ghtml中的div标签来实现浏览图片的获取,首先设置浏览器的background-image属性地址为需要浏览的图片地址,并设置浏览器的background-size属性为100%,使图片根据div标签的大小自动缩放至相应大小,并利用层叠样式表css将图片设置为堆叠模式。 [0013] Further, the acquired images to be viewed as a specific implementation process: using div tags in the hypertext mark up language ghtml to achieve access to browse pictures, first set the background-image property address browse browser is required the image address, and the settings of the browser background-size attribute is 100%, so that image automatically scaled to the appropriate size according to the size div tag, cascading style sheets css using the picture as the stack mode.

[0014]通过采用以上技术方案,本发明的有益效果是:本发明通过将图片进行缩放以适应显示屏显示区的大小,并在交互的过程中将上一张图片进行缩放,使得凸显下一张即将显示的图片,从而实现了各种图片(比如照片)通过浏览器实现跨平台的完美呈现,提高了用户的使用体验,最终实现出一种视差效果,提高了用户的使用满意度。 [0014] By adopting the above technical solution, the beneficial effects of the present invention: The present invention will be scaled to fit the size of the image display area of ​​the display screen, and an image to zoom in on in the course of an interaction, so that the next highlighted pictures from the upcoming show in order to achieve a variety of images (such as photos) to achieve perfect cross-platform rendered by the browser, improved user experience, and ultimately a kind of parallax effect, increased the use of user satisfaction.

附图说明 BRIEF DESCRIPTION

[0015]图1为一张图片布满整个显示屏显示区的示意图。 [0015] Figure 1 is a schematic view of the entire display screen of a picture display area covered.

[0016]图2为第二张图片拖行了一部分到显示屏显示区的示意图。 Portion [0016] FIG. 2 is a second picture dragged to the display area of ​​the display schematic.

具体实施方式 detailed description

[0017]为了使本发明的目的、技术方案及优点更加清楚明白,以下结合具体实施例,对本发明进行进一步详细的说明。 [0017] To make the objectives, technical solutions and advantages of the present invention will become more apparent hereinafter with reference to specific embodiments, the present invention will be further described in detail. 应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不用于限定本发明。 It should be understood that the specific embodiments described herein are only intended to illustrate the present invention and are not intended to limit the present invention.

[0018] —种基于移动端浏览器跨平台人机交互浏览图片的方法,其具体包括以下的步骤: [0018] - the kind of human-computer interaction method for cross-platform browser-based mobile terminal picture browser, which includes the following steps:

[0019]步骤一、获取需要浏览的图片,所述需要浏览的图片为堆叠模式(比如呈现出的整体效果就像一幅扑克牌整齐的堆叠在桌上,观察者在其上方观看只能看到最上面的一张扑克,要想看到下一张的扑克需要抽离第一张扑克),所述堆叠模式是指屏幕上显示第一张图片,其余的图片逐一堆叠,最下层的图片被次下层的图片所覆盖,依次类推,……,第二张图片被第一张图片所覆盖,当然此处图片的后台存放模式也可以是其他的模式,而不限于堆叠模式,只要第一张图片覆盖掉其他未显示的后台图片就可以。 [0019] Step one, you need to get pictures of the images are required for the stack mode (such as showing the overall effect is like a poker neatly stacked on the table, over which the viewer can only watch to see poker to the uppermost one, in order to see the need for a poker first pulled poker), the stack display mode refers to the first picture on the screen, the remaining images one by one are stacked, the lowermost image was once covered by the underlying picture, and so on, ......, the second picture is the first picture of the cover, of course, here the picture of the background storage mode may be other modes, but not limited to stacking mode, as long as the first other pictures overwrite the background picture does not appear on it. 其获取需要浏览的图片的具体实现的过程为:使用超级文本标记语言html中的div标签来实现浏览图片的获取,首先设置浏觅器的background-image属性地址为需要浏览的图片地址,并设置浏览器的background-size属性为1〇〇%,以便图片根据div标签的大小自动缩放至相应大小,并利用层叠样式表css将图片设置为堆叠模式。 Acquiring images you need to process specific implementation are: the use of div tags hypertext markup language html in realized browse pictures acquisition, first set Liu Mi's background-image property address is required to browse pictures address, and set background-size property browser is 1〇〇% to image automatically scaled to the appropriate size according to the size div tag, cascading style sheets css using the picture as the stack mode.

[0020]^步骤二、获取需要浏览的第一张图片的宽度、高度以及当前使用的移动端的显示屏显示区的宽度和高度,以显示屏显示区的宽度和高度为基础,将图片进行放大或者缩小, 使得图片充满整个显示屏显示区。 [0020] ^ step two, the width and height of the screen display region to be viewed acquired first image width, height, and a mobile terminal currently used to screen width and height of the display area on the basis of the enlarged image in or out, so that the picture fills the entire screen display area. 获取图片的宽度和高度可以利用javascript*Image对象设置其src为图片的地址,然后根据对应接口计算图片的宽度和高度。 Images acquired width and height of the object can be set using javascript * Image src its address to the image, and then calculating according to the corresponding interface picture width and height. 或者服务端在存储图片时就记录下当前图片的宽度和高度,在移动端请求此图片数据时,一并将此部分数据发送给移动终端。 Or when the server store picture is recorded when the current width and height of the image, this image data is requested in a mobile terminal, together with this portion of data to the mobile terminal.

[0021] ^了原始图片的宽度和高度,此时再得到移动端显示屏显示区的宽度和高度,就可以以显示屏显示区的宽度和高度为基准将图片进行放大或者缩小,将图片进行等比缩放使之充满整个显示屏幕。 [0021] ^ a width and height of the original image, this time to obtain the width and height of the mobile terminal display the display area, can be enlarged or reduced as the reference will display image width and height of the display area, the picture geometric scaling so that it fills the entire display screen. 以图片的宽度缩放到移动端显示屏显示区的宽度为例,图片高度的计算公式为:最终图片显示高度=显示屏显示区宽度/图片原始宽度*图片原始高度。 Width of the image to be scaled to the width of the display area of ​​the mobile terminal display as an example, the height of the picture is calculated as follows: final picture display screen display zone width = height / width of the original image for original image * height.

[^22] _如图1所示的一张图片布满整个显示屏显示区的示意图。 [22 ^] _ an image as shown in Figure 1 a schematic view of the entire display screen full display area. 图片的四个角正好与显示屏显示区的四个角重合,以屏幕的左上角为坐标原点(〇,〇),按照顺时针方向,依次得出显示屏显示区四个角的坐标分别为:(〇,〇),(W,0),(w,h),(〇,h),其中w表示显示屏显示区的宽度Width,h表示显示屏显示区的高度high。 Coincided with the four corners of the image display region of the four corners of the display coincides to the upper left corner of the screen as the origin of coordinates (square, square), clockwise, the display screen are sequentially obtained coordinates of four corners of the display area, respectively : (square, square), (W, 0), (w, h), (square, h), where w represents the width of the display screen area width, h represents the height of the high region of the display screen. 假设第一张图片缩放后正好铺满整个显示屏显示区,则第一张图片的四个角的坐标和显示屏显示区四个角的坐标相同,也是:(〇,〇), (w,0),(w,h),(0,h)。 Assuming that the first scaled images exactly covered the entire screen display area, the first image and the coordinates of the four corners of the display screen coordinates of four corners of the same region, are: (square, square), (W, 0), (w, h), (0, h). 此时可以设置第二张图片的四个角的坐标,如果第二张图片缩放后也正好可以铺?两整个显不屏显不区,则第二张图片的坐标可以分别(〇,h) , (w,h) , (w,h*2), (0,h*2),即第二张图片位于第一张图片的下方。 At this point you can set a second image coordinates of the four corners, if the second picture Zoom also happens to be paved? Two entire display area does not screen display, the coordinates of the second image can be separately (square, h) , (w, h), (w, h * 2), (0, h * 2), i.e., the second picture is located below the first picture.

[0023]其余图片的四个角的坐标均为:(〇,〇),(w,〇),(w,h),(〇,h),即和第一张图片的坐标相同,但因为是堆叠放置,其均会被第一张图片所覆盖。 [0023] The coordinates of the four corners of the remaining pictures are: (square, square), (W, square), (w, h), (square, H), i.e., the first image and the coordinates of the same, but because They are stacked on top of which will be covered by the first picture. 第二张图片虽然没有被覆盖,但因为其坐标超出了显示屏显示的范围,因此操作者也是看不到的。 The second picture, although not covered, but because it is beyond the scope coordinates displayed on the screen, the operator is also invisible.

[0024]步骤三、屏幕接收手指或者其他触控在屏幕上的滑动后,根据手指的移动方向和距离计算出下一张需要显示的图片,并随着手指或者其他触控在屏幕上的滑动,逐渐将下一张需要显示的图片拖行到显示屏的显示区,下一张图片同样以显示屏显示区的宽度和高度为基础,将图片进行放大或者缩小,使得图片充满整个显示屏显示区,而上一张图片则逐渐还原到图片原始大小,直到下一张需要显示的图片布满整个显示屏的显示区。 After [0024] Step three, finger or other touch screen slidably received on the screen, the movement direction and distance of the finger of an image displayed under the required calculated, and the slide with a finger or other touch on the screen , an image to be displayed next gradually dragged into the display area of ​​the display, the display shows a picture similar to the width and height of the region, based on the picture enlarged or reduced, so that the picture fills the entire display screen area, while the previous picture is gradually restored to the original picture size, the picture to be displayed until the next covered the entire display area of ​​the display.

[0025]假设将缩放系数设定为5,手指的滑动距离offsetY假设为100个像素。 [0025] assumed that the scaling factor is set to 5, the finger sliding distance offsetY assumed 100 pixels. 则在两张图片交互的过程中, In the process of the interaction of the two pictures,

[0026] 针对第一张图片: [0026] For the first picture:

[0027] top :〇ffsetY/scale*2,"left":offsetY/scale*2,"width":w-〇ffsetY/ %&4,〃11£^81^〃:11-(^&的¥/3〇£116;其中'(^〃是指图片的上边界到显示屏显示区上边界的距离;〃 left 〃是指图片的左边界到显示屏显示区左边界的距离;〃 width 〃是指图片缩放后的宽度;〃 height 〃是指图片缩放后的高度。 [0027] top: 〇ffsetY / scale * 2, "left": offsetY / scale * 2, "width": w-〇ffsetY /% & amp; 4, 〃11 £ ^ 81 ^ 〃: 11 - (^ & amp; the ¥ / 3〇 £ 1 16; wherein '(^ 〃 refers to the distance on the zone boundary to the upper boundary of the image display screen; 〃 〃 left refers to the display image from the left edge of the display area left margin; 〃 width 〃 is the width of the image scaling; 〃 〃 height is the height of the image scaling.

[0028]针对第二张图片: [0028] For the second picture:

[0029] top〃: h- of f setY," 1 ef t〃: 0,〃width": w,"height〃 : h;其中“top〃是指图片的上边界到显示屏显示区上边界的距离;〃 left 〃是指图片的左边界到显示屏显示区左边界的距离,即左边是布满了整个屏幕显示区的;〃width〃是指图片缩放后的宽度,正好等于显示屏显示区的宽度;〃 height 〃是指图片缩放后的高度,正好等于显示屏显示区的高度。 [0029] top〃: h- of f setY, "1 ef t〃: 0, 〃width": W, "height〃: H; wherein" top〃 refers to the boundary of the image area on the boundary of the display screen distance; 〃 〃 left refers to the distance from the left edge of the image area of ​​the left edge of the display, i.e., the left is covered the entire screen display area; 〃width〃 is the width of the scaled image, the display screen is exactly equal to the display area width; 〃 〃 height is the height of the image after scaling, is exactly equal to the height of the display area of ​​the display screen.

[0030]如图2所示的第二张图片被向上拖行了一部分后的示意图,其中第二张图片的大小不变,仍保持与显示屏显示区大小一致,向上拖行后,第二张图片覆盖在第一张图片上面,显示屏显示区的上半部分显示第一张图片,显示屏显示屏显示区的下半部分显示第二张图片,而在这个第二张图片逐渐覆盖第一张图片的过程中,第一张图片逐渐缩小,直到第二张图片完全覆盖整个显示屏的显示区,此时笫二张图片的与显示屏的显示区重合,显示屏的显示区回到如图1所示的界面。 After [0030] As shown in FIG. 2 the second picture is a schematic view of the dragged up part, wherein the second image size is not changed, and remains consistent with the display area size of the display screen, dragged upward, the second images in the first image above covers the upper half part of the display region to display the first picture, the bottom half of the display screen of the sub display area displaying the second picture, the second picture in the gradually cover the first process a picture, the first picture is gradually reduced until a second image completely covers the display area of ​​the entire display screen, this time Zi two images coincide with the display area of ​​the display, the display area of ​​the display back interface shown in FIG.

[0031]那么,在第二张图片的拖行过程中,第一张图片的四个角的坐标(顺时针)分别为: [0032] (offsetY/scale*2,-〇ffsetY/scale*2), (w-〇ffsetY/seale*2,-offsetY/scale* 2) , (w-offsetY/scale*2,h-offsetY/scale*2) , (offsetY/scale*2,h-〇ffsetY/scale*2), 第一张图片四个角的坐标(顺时针)分别为:(0,11-〇€€86七¥),^,11-〇€€36七丫),(¥,11*2-offsetY),(0,h*2-〇ffsetY);其中scale为缩放系数,offsetY表示滑动距离,2为任意设定的一个表征图片变化快慢的值,表征图片变化快慢的值要小于scale,即如果scale为5,那么这个值应大于〇并小于5。 [0031] Then, in the course of towing in the second image, the coordinates of the four corners of the first picture (clockwise), respectively: [0032] (offsetY / scale * 2, -〇ffsetY / scale * 2 ), (w-〇ffsetY / seale * 2, -offsetY / scale * 2), (w-offsetY / scale * 2, h-offsetY / scale * 2), (offsetY / scale * 2, h-〇ffsetY / scale * 2), the first pictures of the four corners coordinates (clockwise) are as follows: (0,11-seven €€ 86 billion ¥), ^, 11-billion seven €€ 36 Ah), (¥, 11 * 2-offsetY), (0, h * 2-〇ffsetY); where scale is a scaling factor, expressed offsetY sliding distance, 2 to arbitrarily set a characterization change picture speed values, speed values ​​characterizing picture change smaller than scale, i.e., if the scale is 5, then this value should be greater than and less than 5 square.

[0033]当第二张图片拖行了一部分时,如果操作者在此过程中停止交互(比如手指离开屏幕),则根据offsetY来计算,如果offsetY大于一定阈值(比如阈值可以可以设定为100像素)则认为是要翻到下一张图片,那么第一张图片和第二张图片的最终值为:第一张图片的四个角的坐标为(〇,_h),(w,_h),(w,0),(0,0),第二张图片的四个角的坐标为(〇,〇),(w, 0),(w,h),(0,h) 〇 [0033] When the second picture dragged part, if the operator stops interact in this process (such as a finger away from the screen) is calculated according to offsetY, if offsetY greater than a certain threshold (such thresholds can be set to 100 pixel) is considered to be to turn to the next picture, the first picture and the second picture of the final value: the coordinates of the four corners of the first picture is (square, _h), (w, _h) , (w, 0), (0,0), the coordinates of the four corners of the second image (square, square), (w, 0), (w, h), (0, h) square

[0034]如果offsetY小于100那么第一张和第二张图片分别回滚到之前的值,后续图片计算过程依次类推。 [0034] If the value is less than the previous offsetY 100 so the first and second images, respectively, to roll back, the subsequent calculation process images and so on.

[0035]上述说明示出并描述了本发明的一个优选实施例,但如前所述,应当理解本发明并非局限于本文所披露的形式,不应看作是对其他实施例的排除,而可用于各种其他组合、 修改和环境,并能够在本文所述发明构想范围内,通过上述教导或相关领域的技术或知识进行改动。 [0035] The above description of the embodiments shown and described a preferred embodiment of the present invention, as previously discussed, it should be understood that the invention is not limited to the form disclosed herein should not be considered as excluding other embodiments, the It may be used in various other combinations, modifications, and environments, and can be contemplated within the scope of the invention described herein, or make changes to the above teachings in skill or knowledge of the relevant art. 而本领域人员所进行的改动和变化不脱离本发明的精神和范围,则都应在本发明所附权利要求的保护范围内。 The modifications and variations carried out by the skilled person without departing from the spirit and scope of the invention shall fall within the scope of the appended claims of the invention.

Claims (8)

  1. 1. 一种基于移动端浏览器跨平台人机交互浏览图片的方法,其具体包括以下的步骤: 步骤一、获取需要浏览的图片;步骤二、获取需要浏览的第一张图片的宽度、高度以及当前使用的移动端的显示屏显示区的宽度和高度,以显示屏显示区的宽度和高度为基础,将图片进行放大或者缩小,使得图片充满整个显示屏显示区;步骤三、屏幕接收手指或者其他触控在屏幕上的滑动后,根据手指的移动方向和距离计算出下一张需要显示的图片的尺寸和位置,并随着手指或者其他触控在屏幕上的滑动,逐渐将下一张需要显示的图片拖行到显示屏的显示区,下一张图片同样以显示屏显示区的宽度和高度为基础,将图片进行移动,使得第二张图片逐渐充满整个显示屏显示区,而上一张图片则逐渐等比例缩小,直到下一张需要显示的图片布满整个显示屏的显示区,所 A method based on a mobile terminal browser cross platform interactive browsing images, which comprises the steps of: a step of acquiring images to be viewed; two step, acquiring a width of the first image to be viewed, the height and the width and height of the screen display area currently used by the mobile terminal, the display width and height of the display region, based on the picture enlarged or reduced, so that the image fills the entire screen display area; step III received a finger or screen after sliding on the other touch screen, the movement direction and distance of the finger's size and position is calculated at a picture to be displayed, and slide with a finger or other touch on the screen, next gradually the picture shows the need dragged to the display area of ​​the display, the picture width and height of the display in the same display area, based on the moving picture, the second picture is gradually filled so that the entire screen display area, and the a picture is gradually scaled down, until the next picture to be displayed full screen display of the entire area, the 述逐渐将下一张需要显示的图片拖行到显示屏的显示区的具体过程为:设定第一张图片缩放后正好铺满整个显示屏显示区,则第一张图片的四个角的坐标和显示屏显示区四个角的坐标相同,都是:(0,0),(w,0),(w,h),(0, h);第二张图片的坐标分别(〇,h),(w,h),(w,h*2),(0,h*2);在第二张图片的拖行过程中, 第一张图片的四个角的坐标在顺时针方向分别为:(offsetY/scale*变化系数,-offsetY/ scale*变化系数),(w-offsetY/scale*变化系数,-〇ffsetY/scale*变化系数),(w-offsetY/scale*变化系数,h-offsetY/scale*变化系数),(offsetY/scale*变化系数,h_ offsetY/scale*变化系数),第二张图片四个角的坐标在顺时针方向分别为:(〇,}!-offsetY),(w,h-〇ffsetY),(w,h*变化系数-offsetY) , (0,h*变化系数-offsetY);其中scale为缩放系数,offsetY表示滑动距离,w表示显示屏 Said image to be displayed next gradually dragged into the display region of the display procedure particular to: set a first scaled images exactly covered the entire display area of ​​the display screen, the four corners of the first picture the display shows the same coordinates and the coordinates of the four corners region, are: (0,0), (w, 0), (w, h), (0, h); second image coordinates (square, h), (w, h), (w, h * 2), (0, h * 2); the towing process in the second image, the coordinates of the four corners of the first picture in the clockwise direction are: (offsetY / scale * coefficient of variation, -offsetY / scale * coefficient of variation), (w-offsetY / scale * coefficient of variation, -〇ffsetY / scale * coefficient of variation), (w-offsetY / scale * coefficient of variation, h-offsetY / scale * coefficient of variation), (offsetY / scale * coefficient of variation, h_ offsetY / scale * coefficient of variation), the coordinates of the four corners of the second image in the clockwise direction, respectively: (square,} - offsetY! ), (w, h-〇ffsetY), (w, h * coefficient of variation -offsetY), (0, h * coefficient of variation -offsetY); where scale is a scaling factor, offsetY represents a sliding distance, w represents a display 示区的宽度,h表示显示屏显示区的高度,所述变化系数小于缩放系数。 The width of the display area, h represents a height of the display area of ​​the display screen, the coefficient of variation is less than the scaling factor.
  2. 2.如权利要求1所述的基于移动端浏览器跨平台人机交互浏览图片的方法,其特征在于所述变化系数为2。 2. A method based on the movement of cross-platform client browser interactive image browsing according to claim 1, wherein the variation coefficient is 2.
  3. 3.如权利要求1或者2所述的基于移动端浏览器跨平台人机交互浏览图片的方法,其特征在于所述获取图片的宽度和高度的方式具体为利用javascript中Image对象设置其src 为图片的地址,然后根据对应接口计算图片的宽度和高度。 3. The mobile terminal based on cross-platform browser interactive image browsing method of claim 1 or claim 2, wherein the acquired image width and height in a manner specific to the use of javascript Image object to set its src image address, and the interface is calculated according to the corresponding image width and height.
  4. 4.如权利要求1或者2所述的基于移动端浏览器跨平台人机交互浏览图片的方法,其特征在于所述获取图片的宽度和高度的方式具体为在服务器保存该图片时就记录下当前图片的宽度和高度,在移动端请求此图片数据时,一并将此部分数据发送给移动端。 4. Based on the cross-platform mobile client browser interactive image browsing method of claim 1 or claim 2, wherein the acquired image width and height DETAILED is recorded at the time the picture stored at the server when the current width and height of the image, the mobile terminal requests this image data, together with this portion of data to the mobile terminal.
  5. 5.如权利要求1或者2所述的基于移动端浏览器跨平台人机交互浏览图片的方法,其特征在于所述需要浏览的图片为堆叠模式。 5. The mobile terminal based on cross-platform browser interactive image browsing method of claim 1 or claim 2, wherein said image to be viewed as a stack mode.
  6. 6.如权利要求5所述的基于移动端浏览器跨平台人机交互浏览图片的方法,其特征在于所述堆叠模式是指屏幕上显示第一张图片,其余的图片逐一堆叠,最下层的图片被次下层的图片所覆盖,依次类推,第二张图片被第一张图片所覆盖。 6. The method of claim 5 based on cross-platform mobile client browser interactive image browsing claim, wherein said stack mode refers to the first picture on the screen display, the remaining images one by one are stacked, the lowermost picture is covered times lower picture, and so on, the second picture is the first picture of the coverage.
  7. 7.如权利要求5所述的基于移动端浏览器跨平台人机交互浏览图片的方法,其特征在于采用层叠样式表CSS将图片设置为堆叠模式。 7. The method of browser-based mobile terminal 5 of the cross-platform interactive image browsing claim, characterized in that a cascading style sheet to set the CSS picture stack mode.
  8. 8.如权利要求1或者2所述的基于移动端浏览器跨平台人机交互浏览图片的方法,其特征在于所述获取需要浏览的图片的具体实现的过程为:使用超级文本标记语言html中的div标签来实现浏览图片的获取,首先设置浏览器的background-image属性地址为需要浏览的图片地址,并设置浏览器的background-size属性为100%,使图片根据div标签的大小自动缩放至相应大小,并利用层叠样式表CSS将图片设置为堆叠模式。 8. The mobile terminal based on cross-platform browser interactive image browsing method of claim 1 or claim 2, wherein said process acquired image to be viewed as a particular implementation: the use of hypertext markup language html div tag to achieve browsing picture acquisition, first set the browser background-image property address is required to browse pictures address, and set the background-size property browser is 100%, the picture is automatically scaled to Depending on the size of the div tag corresponding size, and use CSS to Cascading style Sheets picture as the stack mode.
CN 201510094889 2015-03-04 2015-03-04 A method based on a mobile terminal browser, cross-platform computer interaction browse pictures CN104679432B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN 201510094889 CN104679432B (en) 2015-03-04 2015-03-04 A method based on a mobile terminal browser, cross-platform computer interaction browse pictures

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN 201510094889 CN104679432B (en) 2015-03-04 2015-03-04 A method based on a mobile terminal browser, cross-platform computer interaction browse pictures

Publications (2)

Publication Number Publication Date
CN104679432A true CN104679432A (en) 2015-06-03
CN104679432B true CN104679432B (en) 2018-01-30

Family

ID=53314569

Family Applications (1)

Application Number Title Priority Date Filing Date
CN 201510094889 CN104679432B (en) 2015-03-04 2015-03-04 A method based on a mobile terminal browser, cross-platform computer interaction browse pictures

Country Status (1)

Country Link
CN (1) CN104679432B (en)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105898523A (en) * 2016-06-29 2016-08-24 无锡天脉聚源传媒科技有限公司 Video playing method and video playing device
CN106406698A (en) * 2016-09-09 2017-02-15 广州视睿电子科技有限公司 Image displaying method and device

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2007123009A1 (en) * 2006-04-21 2007-11-01 Sony Computer Entertainment Inc. Image browsing device, computer control method and information recording medium
EP1914622A2 (en) * 2006-10-16 2008-04-23 Samsung Electronics Co., Ltd Method and apparatus for moving list on picture plane
CN102316384A (en) * 2011-09-08 2012-01-11 中兴通讯股份有限公司 Page multigraph switching realization method and embedded browser of interactive personality TV (IPTV)
CN102737400A (en) * 2011-04-15 2012-10-17 盛乐信息技术(上海)有限公司 Picture flip system and implement method thereof
CN102789470A (en) * 2011-05-20 2012-11-21 腾讯科技(深圳)有限公司 Method and device for uploading pictures in webpage
CN103197882A (en) * 2013-02-22 2013-07-10 北京小米科技有限责任公司 Image display method and mobile terminal

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2007123009A1 (en) * 2006-04-21 2007-11-01 Sony Computer Entertainment Inc. Image browsing device, computer control method and information recording medium
EP1914622A2 (en) * 2006-10-16 2008-04-23 Samsung Electronics Co., Ltd Method and apparatus for moving list on picture plane
CN102737400A (en) * 2011-04-15 2012-10-17 盛乐信息技术(上海)有限公司 Picture flip system and implement method thereof
CN102789470A (en) * 2011-05-20 2012-11-21 腾讯科技(深圳)有限公司 Method and device for uploading pictures in webpage
CN102316384A (en) * 2011-09-08 2012-01-11 中兴通讯股份有限公司 Page multigraph switching realization method and embedded browser of interactive personality TV (IPTV)
CN103197882A (en) * 2013-02-22 2013-07-10 北京小米科技有限责任公司 Image display method and mobile terminal

Also Published As

Publication number Publication date Type
CN104679432A (en) 2015-06-03 application

Similar Documents

Publication Publication Date Title
US20100318895A1 (en) Systems, Methods, and Media for Presenting Panel-Based Electronic Documents
US8347232B1 (en) Interactive user interface
US7991837B1 (en) Systems and methods for networked, in-context, high resolution image viewing
US20120304113A1 (en) Gesture-based content-object zooming
US20130198641A1 (en) Predictive methods for presenting web content on mobile devices
CN102117290A (en) Method and system used for showing page elements in webpage
US20140143652A1 (en) Dynamic zooming of content with overlays
CN103258491A (en) Method for controlling electronic equipment and electronic equipment
US20120007866A1 (en) Systems and methods for networked, in-context, composed, high resolution image viewing
CN102662566A (en) Magnifying display method and terminal for screen content
US20130106888A1 (en) Interactively zooming content during a presentation
CN102637198A (en) Realization method and device of webpage content display, browser and mobile terminal
CN101727495A (en) Web page zoom-in and zoom-out management system for mobile communication device terminal and application method thereof
CN104504063A (en) Image bullet screen method
CN103678622A (en) Method and device for dynamic rendering of waterfall-type picture
CN103986962A (en) Method and system for displaying suspended playing window
CN102819397A (en) Quick browse and search method of photo album of handheld equipment
US20120278712A1 (en) Multi-input gestures in hierarchical regions
CN102999599A (en) Method and device for displaying picture
CN103677942A (en) Method and device for browsing network pictures at mobile terminal
CN102831155A (en) Method and device for displaying micro image of webpage tag
US20140129988A1 (en) Parallax and/or three-dimensional effects for thumbnail image displays
US20150317365A1 (en) Modular search object framework
CN101937461A (en) Page turning operation-based method and equipment for optimizing web browsing
CN102073650A (en) Adaptive adjustment method and equipment for webpage

Legal Events

Date Code Title Description
C06 Publication
C10 Entry into substantive examination
GR01
CP02