CN105988793A - Image display method and apparatus used for screen display device - Google Patents
Image display method and apparatus used for screen display device Download PDFInfo
- Publication number
- CN105988793A CN105988793A CN201510073111.XA CN201510073111A CN105988793A CN 105988793 A CN105988793 A CN 105988793A CN 201510073111 A CN201510073111 A CN 201510073111A CN 105988793 A CN105988793 A CN 105988793A
- Authority
- CN
- China
- Prior art keywords
- image
- described image
- container
- display device
- screen display
- Prior art date
- Legal status (The legal status 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 status listed.)
- Pending
Links
Landscapes
- Controls And Circuits For Display Device (AREA)
Abstract
The invention discloses an image display method used for a screen display device. The image display method comprises the steps of obtaining a to-be-displayed image; selecting a mode of displaying the image in a preset container; and dynamically displaying all content of the image in the container according to the selected mode. The invention furthermore provides an image display apparatus used for the screen display device. According to the method provided by the invention, the dynamic display mode different from the prior art is adopted, the conflict between information display integrity and space occupancy rate is skillfully solved, the adaptation between a container size and an image size is realized without increasing the container size, and the complete content of the image is displayed in a finite display space.
Description
Technical field
The application relates to image display technology, is specifically related to a kind of image shows side for screen display device
Method.The application relates to a kind of image demonstration apparatus for screen display device simultaneously.
Background technology
Along with computer and the development of Internet technology, occur in that and numerous provide the user various information and clothes
Business website, webpage (also referred to as web page) be then each website to user's displaying, recommendation information, carry
Major way for service.One web page generally comprises multiple resources, such as: word, picture, super
Link, form, list etc..Wherein, the information transmitted due to word, form etc. is the most uninteresting,
And picture is the most bright-colored, short and sweet, tend to bring user perceptual knowledge the most intuitively, because of
This, picture has become one of important member indispensable in web page.
For the element of exhibiting pictures, such as, DIV element, also referred to as container in web page.Generally
The size of container can be preassigned when designing the page, and the picture shown in this embodiment is probably by the 3rd
Side provides, and during browser loads the page, believes according to the URL in the src attribute of picture tag
Breath, from this picture resource of Network Capture.As can be seen here, owing to picture dynamically obtains typically by network,
Therefore, dimension of picture may not mate with container dimensional, and often occurs that dimension of picture is more than container chi
Very little situation, cause cannot in the confined space of container complete exhibiting pictures, affect the viewing experience of user.
The common method solving the problems referred to above at present is: when designing webpage, as far as possible for being used for showing picture
Container bigger size is set, it may be assumed that bigger width value and height value are set.This method is in certain journey
The problems referred to above can be solved on Du, but, still there is following defect:
1) picture resource provided due to third party is the most uncontrollable, therefore, the most still can go out
The problem that now part picture cannot completely show；
2) adopt the complete information of exhibiting pictures in this way, need to take in web page significantly to show
Space, nature can reduce other quantity of information of page presentation, and this will affect the bandwagon effect of other information.
Summary of the invention
The embodiment of the present application provides a kind of image presentation method for screen display device, existing to solve
The problem that static display technology cannot completely show picture material at limited spacial flex.The embodiment of the present application
Also provide for a kind of image demonstration apparatus for screen display device.
The application provides a kind of image presentation method for screen display device, including:
Obtain image to be presented；
Select to show the mode of described image in container set in advance；
The full content of described image is the most dynamically shown according to chosen manner.
Optionally, described method includes:
Obtain width value and the height value of described image；
When the width value of described image is more than its height value, select the exhibition method slid laterally；
When the width value of described image is not more than its height value, select the exhibition method of longitudinal sliding motion.
Optionally, the mode of described image is shown in described selection in container set in advance, also includes:
Obtain width value and the height value of described container；
When the width value of described image is more than its height value, also include:
Described image is carried out equal proportion scaling so that it is height value is identical with the height value of described container；
And/or, when the width value of described image is not more than its height value, also include:
Described image is carried out equal proportion scaling so that it is width value is identical with the width value of described container.
Optionally, when the width value of described image is more than its height value, performing described to be entered by described image
Before the step of row equal proportion scaling, execution operations described below:
Judge whether the height value of described image is more than the height value of described container；
If so, perform described described image to be carried out equal proportion scaling so that it is the height of height value and described container
The step that angle value is identical.
Optionally, when the width value of described image is not more than its height value, described by described image in execution
Before carrying out the step of equal proportion scaling, execution operations described below:
Judge whether the width value of described image is more than the width value of described container；
If so, perform described described image to be carried out equal proportion scaling so that it is the width of width value and described container
The step that angle value is identical.
Optionally, the described full content the most dynamically showing described image according to chosen manner,
Realize in the following way:
According to direction set in advance, slide in the above-described container and show the full content of described image.
Optionally, when selecting the exhibition method slid laterally, described direction set in advance includes: from a left side
To the right side, or from right to left；
When selecting the exhibition method of longitudinal sliding motion, described direction set in advance includes: from top to bottom, or
Person is from top to bottom.
Optionally, circulation execution is described the most dynamically shows described image according to chosen manner
The step of full content.
Optionally, during described container is web page, there is the DIV element of fixing wide high property value.
Optionally, the described full content the most dynamically showing described image according to chosen manner
Realize in the following way:
Utilize the transition mechanism of css, by adjusting described image display position in the above-described container,
The most dynamically show the full content of described image.
Optionally, when detecting that described DIV element occurs in the viewing area of browser, perform described
The step of the full content of described image is the most dynamically shown according to chosen manner.
Optionally, described the most dynamically show according to chosen manner described image whole in
After the step held, execution operations described below:
When described DIV element being detected not in browser viewing area, stop described Dynamic Display process.
Accordingly, the application also provides for a kind of image demonstration apparatus for screen display device, including:
Image acquiring unit, is used for obtaining image to be presented；
Mode selects unit, for selecting to show the mode of described image in container set in advance；
Dynamic Display unit, for the most dynamically showing the complete of described image according to chosen manner
Portion's content.
Optionally, described mode selects unit to include:
Image parameter obtains subelement, for obtaining width value and the height value of described image；
Image parameter judgment sub-unit, for judging that whether the width value of described image is more than its height value；
Slide laterally selection subelement, for when described image parameter judgment sub-unit is output as being, select
Select the exhibition method slid laterally；
Longitudinal sliding motion selects subelement, for when described image parameter judgment sub-unit must be output as no, selects
Select the exhibition method of longitudinal sliding motion.
Optionally, described mode selects unit also to include:
Container parameters obtains subelement, for obtaining width value and the height value of described container；
Image contour scaling subelement, is used for when described image parameter judgment sub-unit is output as being, will
Described image carries out equal proportion scaling so that it is height value is identical with the height value of described container；And/or,
Image wide scaling subelement, is used for when described image parameter judgment sub-unit is output as no, will
Described image carries out equal proportion scaling so that it is width value is identical with the width value of described container.
Optionally, described mode selects unit also to include:
First scaling judgment sub-unit, for when described image parameter judgment sub-unit is output as being, sentences
Whether the height value of disconnected described image is more than the height value of described container, if so, triggers the high-shrinkages such as described image
Put subelement.
Optionally, described mode selects unit also to include:
Second scaling judgment sub-unit, for when described image parameter judgment sub-unit is output as no, sentences
Whether the width value of disconnected described image is more than the width value of described container, if so, triggers the wide contracting of described image
Put subelement.
Optionally, described Dynamic Display unit specifically for, according to direction set in advance, at described container
Middle slip shows the full content of described image.
Optionally, described Dynamic Display unit specifically for, cyclically according to chosen manner in the above-described container
Dynamically show the full content of described image.
Optionally, the container used by described Dynamic Display unit is, in web page, have fixing wide high genus
The DIV element of property value.
Optionally, described Dynamic Display unit specifically for, utilize css transition mechanism, by adjust
Whole described image display position in the above-described container, the most dynamically shows the complete of described image
Portion's content.
Optionally, described device also includes:
Visual detection unit, for detecting in the viewing area whether described DIV element occurs in browser,
If so, described Dynamic Display unit is triggered.
Optionally, described visual detection unit is additionally operable to, after triggering described Dynamic Display cell operation, if
Detect that described DIV element not in browser viewing area, then stops the work of described Dynamic Display unit.
Compared with prior art, the application has the advantage that
The image presentation method for screen display device that the application provides, first obtains image to be presented,
Select to show the mode of image in container set in advance, and dynamic according to chosen manner
The full content of described image is shown on ground.The said method that the application provides, have employed and be different from prior art
Dynamic Display mode, the information that solves dexterously shows the contradiction between integrity and space occupancy rate,
Under conditions of not expanding container dimensional, it is achieved that the adaptation between container dimensional and picture size, limited
Spacial flex illustrates the complete content of image.
Accompanying drawing explanation
Fig. 1 is the flow chart of the embodiment of a kind of image presentation method for screen display device of the application；
Fig. 2 is the process chart of the selection image shows mode that the present embodiment provides；
Fig. 3 is the schematic diagram of the display image of longitudinal sliding motion from top to bottom that the present embodiment provides；
Fig. 4 is the image full content described in Dynamic Display in the DIV of web page that the present embodiment provides
Flow chart；
Fig. 5 is the schematic diagram of the embodiment of a kind of image demonstration apparatus for screen display device of the application.
Detailed description of the invention
Elaborate a lot of detail in the following description so that fully understanding the application.But, this Shen
Please implement to be much different from alternate manner described here, those skilled in the art can not disobey
Doing similar popularization in the case of back of the body the application intension, therefore, the application is not embodied as by following public
Limit.
In this application, a kind of image presentation method for screen display device, Yi Jiyi are each provided
Plant the image demonstration apparatus for screen display device, be described in detail the most one by one.
In order to make it easy to understand, before describing an embodiment, first the technical scheme of the application is made brief description.
At present for showing that the container of image information, its width and height value are typically to refer in advance in web page
Fixed, and it is diversified for needing the image shown by this container, its width and height value are likely larger than
The size of container, causes cannot the most intactly showing image information.For this problem, the application
The technical scheme of embodiment (such as, slides laterally display, longitudinal sliding motion by selecting different exhibition methods
Display), the most dynamically show the full content of described image, it is achieved thereby that empty in limited displaying
The function of image complete information is shown between.
Although the technical scheme of the application is to propose for the image shows problem in web page, but,
Its application is not limited to application based on browser, in other applications, such as native APP,
Or the application in desktop computer, as long as the fixed dimension container on screen display device is shown figure
Picture, the application scenarios particularly cannot known in advance more than container dimensional or picture size in picture size,
The method that the application provides can be used, and obtain corresponding beneficial effect.
Based on the above-mentioned explanation to application scenarios, the container described in the technical program, can be in web page
For the viewing area that the DIV element of exhibiting pictures is corresponding, it is also possible to be picture box and other are for showing
Image, there is fixing width value and the control of height value or region, the description to embodiment below
In be collectively referred to as container.Below embodiments herein is elaborated.
Refer to Fig. 1, it is the embodiment of a kind of image presentation method for screen display device of the application
Flow chart.Described method comprises the steps:
Step 101: obtain image to be presented.
Described image to be presented is intended in container set in advance the image shown.Described image can be from
The picture resource stored in the computer such as client, server reads, it is also possible to be from having shooting
The equipment of device reads, such as, mobile phone, photographing unit etc.；Can also be by Network Capture.
As a example by showing image in the DIV container of web page, the html code snippet of web page is as follows
Shown in:
< div id=" item " style=" width:300px；height:200px">
<img class＝"IMG"style＝"Height to width according to the relation chart boards"src＝"url"/>
</div>
Wherein, the Container ID with fixing wide high property value built with DIV is item, and its width value is
300 pixels, height value is 200 pixels, has an img label under this DIV, and its src property value is given
The URL address information of the image to show in DIV container.Browser comprises above-mentioned html in loading
During the web page of code snippet, corresponding image to be presented can be obtained according to this URL address information.
Step 102: select to show the mode of described image in container set in advance.
The image presentation method that the present embodiment provides, uses Dynamic Display mode, it is achieved that at limited container
The function of middle displaying image complete information.In concrete enforcement, described Dynamic Display mode can have multiple,
For example, it is possible to according to the size of container, image to be presented is divided into several subdivision, then at described container
In show the image of each subdivision successively.
In order to provide a user with good visual experience, the technical scheme of the present embodiment provides at described container
Middle slip shows the preferred implementation of image, enters according to width value and the height value of described image in this step
The selection of line slip exhibition method, specifically includes step 102-1 to 102-3, below in conjunction with the accompanying drawings 2 make into
One step explanation.
Step 102-1: obtain described image and the width value of described container and height value.
In the specific implementation, can be according to the form of described image and the type of application platform, by accordingly
File read operation or calling platform provide interface obtain described image width value.Such as, exist
Windows application in, can read BMP top of file BITMAPFILEHEADER and
BITMAPINFOHEADER data structure, biWidth therein is the width of BMP image, biHeight
It it is the height of BMP image；For the image shown in web page, then JQUERY can be utilized to obtain
Take width value and the height value of image.
For the wide high level of described container, generally can obtain by reading the property value of corresponding control, right
DIV container in web page, it is also possible to utilize JQUERY to obtain its width value and height value, such as,
The width value of the DIV that id is item is obtained, by $ (" #item ") .height () by $ (" #item ") .width ()
Obtain the height value of the DIV that id is item.
Step 102-2: judge that the width value of described image, whether more than its height value, if so, performs step
102-3, otherwise, performs step 102-4.
When the width value of described image is more than its height value, illustrates that described image is horizontal figure, forward step 102-3 to
Perform；When the width value of described image is not more than its height value, illustrates that described image is perpendicular figure, forward step to
Rapid 102-4 performs.
Step 102-3: select the exhibition method slid laterally, and described image is carried out equal proportion scaling, make
Its height value is identical with the height value of described container.
For horizontal figure, the exhibition method slid laterally can be selected, the most in the above-described container, use the most sliding
Dynamic animation mode shows the full content of described image.
Further, it is contemplated that the height value of described image is likely larger than the height value of described container, this
In the case of, described image has partial content during sliding laterally cannot be shown；And when described image
When height value is less than the height value of described container, although described image can be intactly during sliding laterally
Show, but, described container is not filled in the space of vertical direction, may affect visual effect.
For above-mentioned two situations, the technical scheme of the present embodiment, it is provided that at the exhibition method that selection slides laterally
Time, described image is carried out the preferred implementation of equal proportion scaling.
Specifically, by described image is carried out equal proportion scaling so that it is height value and the height of described container
It is worth identical.Such as, the width value of described image and height value are respectively imgWidth and imgHeight, institute
Width value and the height value of stating container are respectively divWidth and divHeight, then the equal proportion contracting of this step
Put operation, the width value of described image and height value can be adjusted according to equation below:
Picture traverse value=(imgWidth*divHeight)/imgHeight
Picture altitude value=divHeight
Why to use above-mentioned equal proportion scalable manner, be in order to avoid described image deforms after scaling,
Affect bandwagon effect.
Step 102-4: select the exhibition method of longitudinal sliding motion, and described image is carried out equal proportion scaling, make
Its width value is identical with the width value of described container.
For perpendicular figure, the exhibition method of longitudinal sliding motion can be selected, the most in the above-described container, use the most sliding
Dynamic animation mode shows the full content of described image.
Select horizontal exhibition method similar with step 102-3, after selecting longitudinal exhibition method, it is also possible to pass through
Described image is carried out equal proportion scaling so that it is width value is identical with the width value of described container, such as, can
So that the width value of described image and height value are adjusted (the same step of implication of each parameter according to equation below
102-3):
Picture traverse value=divWidth
Picture altitude value=(divWidth*imgHeight)/imgWidth
So far, by above-mentioned steps 102-1 to 102-4, describe selection Dynamic Display mode and carry out phase
The processing procedure of the image equal proportion scaling answered.
Process further, it is also possible to refine further this part, it is contemplated that vectogram after processing through scaling not
The bandwagon effect of image can be affected, rather than vectogram may affect the quality of image, such as mould after amplification
Stick with paste unclear.Therefore can be that zoom operations adds certain restrictive condition for concrete application demand.Such as,
The image shown in web page is frequently not vectogram, therefore the method that the present embodiment provides is applied to
During the image shows of web page, the amplifieroperation of described image can not be carried out, in this case can use
Following handling process:
When the width value of described image is more than its height value, selects the exhibition method slid laterally, and judge
Whether the height value of described image is more than the height value of described container, if so, described image is carried out equal proportion
Scaling so that it is height value is identical with the height value of described container；
And/or, when the width value of described image is not more than its height value, select the exhibition method of longitudinal sliding motion,
And judge whether the width value of described image is more than the width value of described container, if so, described image is carried out
Equal proportion scales so that it is width value is identical with the width value of described container.
Step 103: the most dynamically show the full content of described image according to chosen manner.
Have selected the mode of Dynamic Display image in a step 102, the most then exist according to chosen manner
Described container is dynamically shown the full content of described image.
If using the exhibition method that slides laterally, then can according to direction set in advance from left to right or
Carrying out from right to left slides shows.For displaying of sliding from right to left, can first described image be shown statically
Showing in the above-described container as original state, such as, the left margin of image overlaps with the left margin of described container；
Image can also be shown the most in the above-described container during original state, and with the left margin of described image and described appearance
The right margin of device overlaps as starting point.Slide the most from right to left and show image, until the right of described image
Boundary overlaps with the right margin of described container, thus completes a Dynamic Display process.Slip exhibition from left to right
Show that process is identical with aforesaid way principle, repeat no more.
Same reason, if use the exhibition method of longitudinal sliding motion, then can be according to side set in advance
Show to carrying out from top to bottom or from top to bottom sliding.For displaying of sliding from top to bottom, can be first by institute
State image to show statically in the above-described container as original state, such as, the coboundary of image and described appearance
The coboundary of device overlaps；Image can also be shown the most in the above-described container, with described image during original state
Coboundary overlaps as starting point with the lower boundary of described container.Slide the most from bottom to top and show image, until
The lower boundary of described image overlaps with the lower boundary of described container, thus completes a Dynamic Display process.From
Upper downward sliding shows that process is identical with aforesaid way principle, repeats no more.
In view of the common custom that browses of user, slip from right to left and from top to bottom therein is shown
Mode, for the preferred implementation of the present embodiment.Referring to Fig. 3, it is the display figure of longitudinal sliding motion from top to bottom
The schematic diagram of picture.In this schematic diagram, dotted line frame represents the viewing area at the container place showing described image,
Described image is perpendicular figure, therefore have selected the exhibition method of longitudinal sliding motion, at the beginning of wherein figure (a) is shown for sliding
Beginning state, now, described image in the way of overlapping with the coboundary of container static state display in the above-described container,
Parts of images content is in the outside of container, is shown；Subsequently according to arrow instruction direction start to
Upper slip is shown, figure (b) is the schematic diagram at the end of this displaying process, the various piece of the most whole image
Shown the most in the above-described container.
Preferably, in order to allow users to more accurately obtain image information, in being embodied as, also may be used
To use circularly exhibiting mode, i.e. after original state has started a Dynamic Display process, again return
To original state, then start new one and take turns Dynamic Display process ... circulate execution in the manner described above.
When being embodied as, it is possible to use the image rendering interface that application platform provides, by (the most such as,
Every 20ms) realize Dynamic Display process in the specified portions specifying position to draw described image of described container.
Such as, the DrawImage () method provided for Image class in MFC class libraries can be painted in the position specified
System specifies the specified portions of image, for showing image at web page, it is also possible to pass through JavaScript
The drawImage () method that code call is similar, it is achieved described Dynamic Display function.
Preferably, it is also possible to the animation mechanism utilizing application platform to provide realizes Dynamic Display process.Such as,
CSS transition mechanism can be utilized in web page to realize the Dynamic Display of image.Transition is
Characteristic newly added in CSS3, uses this characteristic, when the size of element, position, color, layout, transparent
When the numerical value such as degree change, the animation effect of transition can be produced.
Simultaneously, it is contemplated that browser, can be according to user to browsing window slide during displayed page
Operation, updates the content of pages of display in window viewing area.Based on above-mentioned consideration, in order to reduce setting
Taking of standby resource, can only when for showing viewing area that the DIV container of image occurs in browser,
Trigger Dynamic Display process.Below with dynamic in the DIV element with fixing wide high property value of web page
As a example by state shows image, by step 103-1 to 103-3, this process is described further, relevant treatment stream
Journey refers to Fig. 4.
Step 103-1: in judging the viewing area whether described DIV element occurs in browser；If so, hold
Row step 103-2.
The position relationship between JQUERY monitoring DIV element and browser viewing area can be utilized, thus
Judge whether described container occurs in the viewing area of browser.Obtained to this end, first introduce by JQUERY
4 determinant attributes, as a example by the id of described DIV is as item.
(1)jQuery('#item').offset().top
Obtain the absolute offset values of DIV container, i.e. the coboundary of the actual size of DIV container is to page top
Distance, this value not with browser window roll and change.
(2)jQuery('#item').outerHeight()
Obtain the actual size of DIV container.
(3)jQuery(window).scrollTop()
Obtaining the top side-play amount that browser window rolls, the most now the coboundary of viewing area is to page top
The side-play amount on boundary, it is understood that become full page has rolled how many distances.
(4)jQuery(window).height()
Obtain the height of browser window viewing area.
During DIV container scrolls up beyond viewing area along with the page, the top of viewing area is inclined
Shifting amount is in being gradually increased, when the top side-play amount of viewing area, more than container coboundary to page top
Distance and container itself highly sum time, illustrate this container in scroll up process beyond browsing
The viewing area of device window, i.e. meets following condition 1:
jQuery(window).scrollTop()>(jQuery(‘#item’).offset().top+jQuery(‘#item’).outerHeight())
During container scrolls down through beyond viewing area along with the page, the top side-play amount of viewing area
Be in gradually decreasing, when the top side-play amount of viewing area, less than container coboundary to page top away from
From during with the difference of viewing area height, illustrate this container during scrolling down through beyond browser window
Mouthful viewing area, i.e. meet following condition 2:
jQuery(window).scrollTop()<(jQuery(‘#item’).offset().top-jQuery(window).height())
Therefore, the expression formula of condition 1 and condition 2 can be performed or computing by this step, if result is false,
Illustrate that above-mentioned two condition is all unsatisfactory for, then judge that described DIV container occurs in viewing area, Ke Yiji
Continuous execution step 103-2.
Step 103-2: utilize the transition attribute of css, by adjusting described image in the above-described container
Display position, the most dynamically shows the full content of described image.
The present embodiment uses JQUERY to control the pattern of CSS, by the coordinate figure of Altered Graphs picture, by
Transition mechanism automatically uses the mode of gradually transition to complete coordinate transformation process, thus realize image from
Initial position slides into the animated show effect of target location.
For horizontal figure, slide laterally mode owing to using, need to change the abscissa value of described picture position.
As a example by sliding from right to left, the original state shown in the above-described container from described image, transition is final
The right margin of described image overlaps with the right margin of described container, then when described image arrives target location,
The pixel count of its abscissa occurred level displacement is as shown by the following formula:
(1) original state is that the left margin of described image overlaps with the left margin of described container
Width-container width after abscissa horizontal displacement pixel count=described image scaling；
(2) original state is that the left margin of described image overlaps with the right margin of described container
Width after abscissa horizontal displacement pixel count=described image scaling；
For sliding from left to right, the calculating of abscissa horizontal displacement pixel count, former with slide from right to left
Reason is identical, and here is omitted.
For perpendicular figure, owing to using longitudinal sliding motion mode, need to change the ordinate value of described picture position.
As a example by sliding from bottom to top, the pixel count of its vertical coordinate generation vertical displacement as shown by the following formula:
(1) original state is that the coboundary of described image overlaps with the coboundary of described container
Height-container height after vertical coordinate vertical displacement pixel count=described image scaling；
(2) original state is that the coboundary of described image overlaps with the lower boundary of described container
Height after vertical coordinate vertical displacement pixel count=described image scaling；
For sliding from the top down, the calculating of vertical coordinate vertical displacement pixel count, former with slide from bottom to top
Reason is identical, and here is omitted.
Changing described image coordinate figure in the above-described container in the manner described above, transition mechanism will be adopted
Within the time period set in advance, complete above-mentioned change with transient mode, thus it is sliding in container to present image
The dynamic animation effect shown, thus intactly show the full content of described image.
The described time period set in advance, refer to one of attribute that CSS3transition comprises: conversion continuity
Time (transition-duration), i.e. the persistent period of transformation process.Specific to the present embodiment, it is simply that
Refer to the time of the most above-mentioned Dynamic Display process.In the specific implementation, can be by transition-duration
It is set to fixing empirical value, such as a 2s；Can also set according to the concrete numerical value of coordinate figure change
Put, for sliding laterally mode, can be configured, for longitudinal direction according to abscissa horizontal displacement pixel count
Sliding type, can be configured according to vertical coordinate vertical displacement pixel count so that holding of Dynamic Display process
The continuous time is altered to direct ratio with coordinate figure.
Further, it is also possible to be configured other attributes of CSS3transition, such as, the speed of conversion becomes
Change (transition-timing-function) and conversion time delay (transition-delay) etc., thus obtain
Obtain different Dynamic Display effects.
In order to allow users to more accurately obtain image information, in being embodied as, it is also possible to use and follow
Ring exhibition method, i.e. from the beginning of original state, completes once to move by adjusting coordinate figure triggering transition
After state displaying process, come back to original state, again adjust coordinate figure triggering transition and start a new round
Dynamic Display process ... circulate execution in the manner described above.
Step 103-3: detect described DIV element the most not in browser viewing area, if so, stop institute
State Dynamic Display process.
After starting Dynamic Display image in the DIV container of the page, after particularly starting the cycle over displaying process,
Can perform this step judge described DIV element whether departing from viewing area, its ultimate principle and step
103-1 is identical.In the condition 1 be given in step 103-1 and condition 2, as long as meeting one of them,
Then illustrate described DIV element along with the rolling of the page, beyond the viewing area of browser window.
Therefore, condition 1 and the expression formula of condition 2 that step 103-1 can be given by this step perform or computing,
Result is true, illustrates that described DIV element, the most not in viewing area, can stop step 103-2 and perform
Dynamic Display process.
In sum, the image presentation method for screen display device that the application provides, owing to have employed
Being different from the Dynamic Display mode of prior art, the information that solves dexterously shows integrity and space occupancy rate
Between contradiction, under conditions of not expanding container dimensional, it is achieved that between container dimensional and picture size
Adaptation, illustrates the complete content of image in limited spacial flex.
In the above-described embodiment, it is provided that a kind of image presentation method for screen display device, therewith
Corresponding, the application also provides for a kind of image demonstration apparatus for screen display device.Refer to Fig. 5,
It is the embodiment schematic diagram of a kind of image demonstration apparatus for screen display device of the application.Due to dress
Putting embodiment and be substantially similar to embodiment of the method, so describing fairly simple, it is real that relevant part sees method
The part executing example illustrates.Device embodiment described below is only schematically.
A kind of image demonstration apparatus for screen display device of the present embodiment, including:
Image acquiring unit 501, is used for obtaining image to be presented；
Mode selects unit 502, for selecting to show the mode of described image in container set in advance；
Dynamic Display unit 503, for the most dynamically showing described image according to chosen manner
Full content.
Optionally, described mode selects unit to include:
Image parameter obtains subelement, for obtaining width value and the height value of described image；
Image parameter judgment sub-unit, for judging that whether the width value of described image is more than its height value；
Slide laterally selection subelement, for when described image parameter judgment sub-unit is output as being, select
Select the exhibition method slid laterally；
Longitudinal sliding motion selects subelement, for when described image parameter judgment sub-unit must be output as no, selects
Select the exhibition method of longitudinal sliding motion.
Optionally, described mode selects unit also to include:
Container parameters obtains subelement, for obtaining width value and the height value of described container；
Image contour scaling subelement, is used for when described image parameter judgment sub-unit is output as being, will
Described image carries out equal proportion scaling so that it is height value is identical with the height value of described container；
Image wide scaling subelement, is used for when described image parameter judgment sub-unit is output as no, will
Described image carries out equal proportion scaling so that it is width value is identical with the width value of described container.
Optionally, described mode selects unit also to include:
First scaling judgment sub-unit, for when described image parameter judgment sub-unit is output as being, sentences
Whether the height value of disconnected described image is more than the height value of described container, if so, triggers the high-shrinkages such as described image
Put subelement.
Optionally, described mode selects unit also to include:
Second scaling judgment sub-unit, for when described image parameter judgment sub-unit is output as no, sentences
Whether the width value of disconnected described image is more than the width value of described container, if so, triggers the wide contracting of described image
Put subelement.
Optionally, described Dynamic Display unit specifically for, according to direction set in advance, at described container
Middle slip shows the full content of described image.
Optionally, described Dynamic Display unit specifically for, cyclically according to chosen manner in the above-described container
Dynamically show the full content of described image.
Optionally, the container used by described Dynamic Display unit is, in web page, have fixing wide high genus
The DIV element of property value.
Optionally, described Dynamic Display unit specifically for, utilize css transition mechanism, by adjust
Whole described image display position in the above-described container, the most dynamically shows the complete of described image
Portion's content.
Optionally, described device also includes:
Visual detection unit, for detecting in the viewing area whether described DIV element occurs in browser,
If so, described Dynamic Display unit is triggered.
Optionally, described visual detection unit is additionally operable to, after triggering described Dynamic Display cell operation, if
Detect that described DIV element not in browser viewing area, then stops the work of described Dynamic Display unit.
Although the application is open as above with preferred embodiment, but it is not for limiting the application, Ren Heben
Skilled person, without departing from spirit and scope, can make possible variation and amendment,
Therefore the protection domain of the application should be defined in the range of standard with the application claim.
In a typical configuration, calculating equipment includes one or more processor (CPU), input/output
Interface, network interface and internal memory.
Internal memory potentially includes the volatile memory in computer-readable medium, random access memory
(RAM) and/or the form such as Nonvolatile memory, such as read only memory (ROM) or flash memory (flash RAM).
Internal memory is the example of computer-readable medium.
1, computer-readable medium includes that permanent and non-permanent, removable and non-removable media can be by
Any method or technology realize information storage.Information can be computer-readable instruction, data structure, journey
The module of sequence or other data.The example of the storage medium of computer includes, but are not limited to phase transition internal memory
(PRAM), static RAM (SRAM), dynamic random access memory (DRAM), its
The random access memory (RAM) of his type, read only memory (ROM), electrically erasable is read-only deposits
Reservoir (EEPROM), fast flash memory bank or other memory techniques, read-only optical disc read only memory
(CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassette tape, tape magnetic magnetic
Disk storage or other magnetic storage apparatus or any other non-transmission medium, can be used for storage can be set by calculating
The standby information accessed.According to defining herein, computer-readable medium does not include non-temporary computer-readable matchmaker
Body (transitory media), such as data signal and the carrier wave of modulation.
2, it will be understood by those skilled in the art that embodiments herein can be provided as method, system or computer
Program product.Therefore, the application can use complete hardware embodiment, complete software implementation or combine software
Form with the embodiment of hardware aspect.And, the application can use and wherein include meter one or more
The computer-usable storage medium of calculation machine usable program code (include but not limited to disk memory,
CD-ROM, optical memory etc.) form of the upper computer program implemented.
Claims (23)
1. the image presentation method for screen display device, it is characterised in that including:
Obtain image to be presented；
Select to show the mode of described image in container set in advance；
The full content of described image is the most dynamically shown according to chosen manner.
Image presentation method for screen display device the most according to claim 1, it is characterised in that
The mode of described image is shown in described selection in container set in advance, including:
Obtain width value and the height value of described image；
When the width value of described image is more than its height value, select the exhibition method slid laterally；
When the width value of described image is not more than its height value, select the exhibition method of longitudinal sliding motion.
Image presentation method for screen display device the most according to claim 2, it is characterised in that
The mode of described image is shown in described selection in container set in advance, also includes:
Obtain width value and the height value of described container；
When the width value of described image is more than its height value, also include:
Described image is carried out equal proportion scaling so that it is height value is identical with the height value of described container；
And/or, when the width value of described image is not more than its height value, also include:
Described image is carried out equal proportion scaling so that it is width value is identical with the width value of described container.
Image presentation method for screen display device the most according to claim 3, it is characterised in that
When the width value of described image is more than its height value, described described image is carried out equal proportion scaling performing
Step before, perform operations described below:
Judge whether the height value of described image is more than the height value of described container；
If so, perform described described image to be carried out equal proportion scaling so that it is the height of height value and described container
The step that angle value is identical.
Image presentation method for screen display device the most according to claim 3, it is characterised in that
When the width value of described image is not more than its height value, described described image is carried out equal proportion contracting performing
Before the step put, execution operations described below:
Judge whether the width value of described image is more than the width value of described container；
If so, perform described described image to be carried out equal proportion scaling so that it is the width of width value and described container
The step that angle value is identical.
Image presentation method for screen display device the most according to claim 2, it is characterised in that
The described full content the most dynamically showing described image according to chosen manner, uses such as lower section
Formula realizes:
According to direction set in advance, slide in the above-described container and show the full content of described image.
Image presentation method for screen display device the most according to claim 6, it is characterised in that
When selecting the exhibition method slid laterally, described direction set in advance includes: from left to right, or from
Right to a left side；
When selecting the exhibition method of longitudinal sliding motion, described direction set in advance includes: from top to bottom, or
Person is from top to bottom.
Image presentation method for screen display device the most according to claim 1, it is characterised in that
Circulation performs the step of the described full content the most dynamically showing described image according to chosen manner
Suddenly.
9., according to the arbitrary described image presentation method for screen display device of claim 1-8, it is special
Levy and be, described container be in web page, there is the DIV element of fixing wide high property value.
Image presentation method for screen display device the most according to claim 9, its feature exists
In, the described full content the most dynamically showing described image according to chosen manner uses as follows
Mode realizes:
Utilize the transition mechanism of css, by adjusting described image display position in the above-described container,
The most dynamically show the full content of described image.
11. image presentation method for screen display device according to claim 9, it is characterised in that
When detecting that described DIV element occurs in the viewing area of browser, perform described according to chosen manner
The most dynamically show the step of the full content of described image.
12. image presentation method for screen display device according to claim 11, its feature exists
In, in the step of the described full content the most dynamically showing described image according to chosen manner
Afterwards, operations described below is performed:
When described DIV element being detected not in browser viewing area, stop described Dynamic Display process.
13. 1 kinds of image demonstration apparatus for screen display device, it is characterised in that including:
Image acquiring unit, is used for obtaining image to be presented；
Mode selects unit, for selecting to show the mode of described image in container set in advance；
Dynamic Display unit, for the most dynamically showing the complete of described image according to chosen manner
Portion's content.
14. image demonstration apparatus for screen display device according to claim 13, its feature exists
In, described mode selects unit to include:
Image parameter obtains subelement, for obtaining width value and the height value of described image；
Image parameter judgment sub-unit, for judging that whether the width value of described image is more than its height value；
Slide laterally selection subelement, for when described image parameter judgment sub-unit is output as being, select
Select the exhibition method slid laterally；
Longitudinal sliding motion selects subelement, for when described image parameter judgment sub-unit must be output as no, selects
Select the exhibition method of longitudinal sliding motion.
15. image demonstration apparatus for screen display device according to claim 14, its feature exists
In, described mode selects unit also to include:
Container parameters obtains subelement, for obtaining width value and the height value of described container；
Image contour scaling subelement, is used for when described image parameter judgment sub-unit is output as being, will
Described image carries out equal proportion scaling so that it is height value is identical with the height value of described container；And/or,
Image wide scaling subelement, is used for when described image parameter judgment sub-unit is output as no, will
Described image carries out equal proportion scaling so that it is width value is identical with the width value of described container.
16. image demonstration apparatus for screen display device according to claim 15, its feature exists
In, described mode selects unit also to include:
First scaling judgment sub-unit, for when described image parameter judgment sub-unit is output as being, sentences
Whether the height value of disconnected described image is more than the height value of described container, if so, triggers the high-shrinkages such as described image
Put subelement.
17. image demonstration apparatus for screen display device according to claim 15, its feature exists
In, described mode selects unit also to include:
Second scaling judgment sub-unit, for when described image parameter judgment sub-unit is output as no, sentences
Whether the width value of disconnected described image is more than the width value of described container, if so, triggers the wide contracting of described image
Put subelement.
18. image demonstration apparatus for screen display device according to claim 14, its feature exists
In, described Dynamic Display unit specifically for, according to direction set in advance, slide in the above-described container aobvious
Show the full content of described image.
19. image demonstration apparatus for screen display device according to claim 13, its feature exists
In, described Dynamic Display unit specifically for, cyclically the most dynamically open up according to chosen manner
Show the full content of described image.
20. according to the arbitrary described image demonstration apparatus for screen display device of claim 13-19, its
Being characterised by, the container used by described Dynamic Display unit is, in web page, have fixing wide high attribute
The DIV element of value.
21. image demonstration apparatus for screen display device according to claim 20, its feature exists
In, described Dynamic Display unit specifically for, utilize the transition mechanism of css, by adjusting described figure
As display position in the above-described container, the most dynamically show the full content of described image.
22. image demonstration apparatus for screen display device according to claim 20, its feature exists
In, also include:
Visual detection unit, for detecting in the viewing area whether described DIV element occurs in browser,
If so, described Dynamic Display unit is triggered.
23. image demonstration apparatus for screen display device according to claim 22, its feature exists
In, described visual detection unit is additionally operable to, after triggering described Dynamic Display cell operation, if institute being detected
State DIV element not in browser viewing area, then stop the work of described Dynamic Display unit.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510073111.XA CN105988793A (en) | 2015-02-11 | 2015-02-11 | Image display method and apparatus used for screen display device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510073111.XA CN105988793A (en) | 2015-02-11 | 2015-02-11 | Image display method and apparatus used for screen display device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN105988793A true CN105988793A (en) | 2016-10-05 |
Family
ID=57041175
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510073111.XA Pending CN105988793A (en) | 2015-02-11 | 2015-02-11 | Image display method and apparatus used for screen display device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105988793A (en) |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2018072638A1 (en) * | 2016-10-19 | 2018-04-26 | 阿里巴巴集团控股有限公司 | Method and device for presenting animation image on mobile device |
| CN109857882A (en) * | 2018-12-20 | 2019-06-07 | 惠州Tcl移动通信有限公司 | Image processing method, device and storage medium |
| CN110781440A (en) * | 2019-10-31 | 2020-02-11 | 北京东软望海科技有限公司 | Container height adjusting method and device, computer equipment and storage medium |
| CN110851749A (en) * | 2018-07-25 | 2020-02-28 | 北京京东尚科信息技术有限公司 | Picture display method and device, electronic equipment and readable medium |
| CN110858154A (en) * | 2018-08-24 | 2020-03-03 | 北京金山云网络技术有限公司 | Switching display method and device of carousel pictures, electronic equipment and storage medium |
| CN111125581A (en) * | 2019-12-13 | 2020-05-08 | 北京金堤科技有限公司 | Picture loading method and device |
| CN113449222A (en) * | 2021-06-17 | 2021-09-28 | 青岛海尔科技有限公司 | Picture display method, picture display device and electronic equipment |
| TWI746148B (en) * | 2020-09-04 | 2021-11-11 | 宏碁股份有限公司 | Smart speaker, smart speaker operating system and method for dynamically adjusting dot matrix pattern |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102150413A (en) * | 2008-09-11 | 2011-08-10 | 索尼爱立信移动通讯有限公司 | Display device and method for displaying images in a variable size display area |
| CN102819560A (en) * | 2012-06-29 | 2012-12-12 | 北京奇虎科技有限公司 | Display method and device of picture in webpage |
| CN104111950A (en) * | 2013-04-19 | 2014-10-22 | 腾讯科技（深圳）有限公司 | Webpage image loading method and webpage image loading device |
-
2015
- 2015-02-11 CN CN201510073111.XA patent/CN105988793A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102150413A (en) * | 2008-09-11 | 2011-08-10 | 索尼爱立信移动通讯有限公司 | Display device and method for displaying images in a variable size display area |
| CN102819560A (en) * | 2012-06-29 | 2012-12-12 | 北京奇虎科技有限公司 | Display method and device of picture in webpage |
| CN104111950A (en) * | 2013-04-19 | 2014-10-22 | 腾讯科技（深圳）有限公司 | Webpage image loading method and webpage image loading device |
Non-Patent Citations (1)
| Title |
|---|
| 无: ""DIV+CSS图片不间断滚动jquery特效不停从右边往左滚动图片特效"", 《HTTP://WWW.DIVCSS5.COM/CSS-TEXIAO/TEXIAO656.SHTML》 * |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2018072638A1 (en) * | 2016-10-19 | 2018-04-26 | 阿里巴巴集团控股有限公司 | Method and device for presenting animation image on mobile device |
| US10573053B2 (en) | 2016-10-19 | 2020-02-25 | Alibaba Group Holding Limited | Method and apparatus for animating images on mobile devices |
| CN110851749A (en) * | 2018-07-25 | 2020-02-28 | 北京京东尚科信息技术有限公司 | Picture display method and device, electronic equipment and readable medium |
| CN110858154A (en) * | 2018-08-24 | 2020-03-03 | 北京金山云网络技术有限公司 | Switching display method and device of carousel pictures, electronic equipment and storage medium |
| CN110858154B (en) * | 2018-08-24 | 2023-09-01 | 北京金山云网络技术有限公司 | Switching display method and device of carousel graphs, electronic equipment and storage medium |
| CN109857882A (en) * | 2018-12-20 | 2019-06-07 | 惠州Tcl移动通信有限公司 | Image processing method, device and storage medium |
| CN110781440A (en) * | 2019-10-31 | 2020-02-11 | 北京东软望海科技有限公司 | Container height adjusting method and device, computer equipment and storage medium |
| CN111125581A (en) * | 2019-12-13 | 2020-05-08 | 北京金堤科技有限公司 | Picture loading method and device |
| TWI746148B (en) * | 2020-09-04 | 2021-11-11 | 宏碁股份有限公司 | Smart speaker, smart speaker operating system and method for dynamically adjusting dot matrix pattern |
| CN113449222A (en) * | 2021-06-17 | 2021-09-28 | 青岛海尔科技有限公司 | Picture display method, picture display device and electronic equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105988793A (en) | Image display method and apparatus used for screen display device | |
| CN103853417B (en) | The rolling Pagination Display method and apparatus of network dynamic picture | |
| US20160357364A1 (en) | Graphical User Interface for a Document Viewing Application | |
| WO2017124811A1 (en) | Data drawing method and apparatus, terminal and storage medium | |
| CN107977137B (en) | Object display method, device and equipment of application page | |
| TWI671647B (en) | Method, device and electronic device for calculating the duration of the first screen of a page | |
| JP6975339B2 (en) | Backdrop rendering of digital components | |
| WO2017024964A1 (en) | Object-associated image quick preview method and device | |
| CN107766349B (en) | Method, device, equipment and client for generating text | |
| CN110377285A (en) | A kind of method, apparatus and computer equipment generating page skeleton screen | |
| CN105373593B (en) | The method and device of object element in a kind of displayed web page | |
| CN109582898A (en) | A kind of generation method and device of the news web page page | |
| US10915236B2 (en) | User interface design system | |
| US11501054B2 (en) | Layout generation for an electronic document that includes a web object | |
| CN107203303A (en) | A kind of interface display method and device | |
| CN107707965A (en) | The generation method and device of a kind of barrage | |
| WO2015180448A1 (en) | Method and device for switching playing mode of mobile terminal, storage medium and program | |
| CN106325873A (en) | Multi-window page display processing method and device | |
| CN109948084B (en) | Webpage information display method, device, medium and computing equipment | |
| CN113326043B (en) | Webpage rendering method, webpage manufacturing method and webpage rendering system | |
| CN109522497A (en) | A kind of the adaptation display methods and device of the news web page page | |
| CN113393294A (en) | Page display method and device, equipment and storage medium | |
| CN105630893A (en) | Display method and device of photo title | |
| CN106874387B (en) | Method for displaying real-time information in self-adaptive HTML (Hypertext markup language) scrolling mode | |
| CN108134906A (en) | Image processing method and its system |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| REG | Reference to a national code |
Ref country code: HK Ref legal event code: DE Ref document number: 1229465 Country of ref document: HK |
|
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20161005 |
|
| REG | Reference to a national code |
Ref country code: HK Ref legal event code: WD Ref document number: 1229465 Country of ref document: HK |