CN103019516B - For the method and apparatus showing the page - Google Patents
For the method and apparatus showing the page Download PDFInfo
- Publication number
- CN103019516B CN103019516B CN201210530625.XA CN201210530625A CN103019516B CN 103019516 B CN103019516 B CN 103019516B CN 201210530625 A CN201210530625 A CN 201210530625A CN 103019516 B CN103019516 B CN 103019516B
- Authority
- CN
- China
- Prior art keywords
- layer
- page
- precalculated position
- user
- precalculated
- 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.)
- Expired - Fee Related
Links
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a kind of method and apparatus for showing the page, wherein the page includes the first figure layer and the second figure layer being associated with the first figure layer, and the second figure layer hides display, and equipment includes: detection module, for detecting user's operating position on the page；And second figure layer present module, after receiving the triggering message that described detection module sends, be suitable to: the position of described second figure layer is altered in steps, until the position of described second figure layer reaches the first precalculated position in the range of described first figure layer；Make the second figure layer stopping move and reached for first scheduled time；And the position of described second figure layer is set to the second precalculated position on described first figure layer from described first precalculated position；Hide module, for when user on the page when operating off described first figure layer, hide described second figure layer.Reduce the jumping characteristic of second figure layer Overlapping display process on the first figure layer, thus improve the visual experience of user.
Description
Technical field
The present invention relates to field of computer technology, be specifically related to a kind of method and apparatus for showing the page.
Background technology
Figure layer provides a kind of means controling effectively page object, and figure layer can include text, picture, form, plug-in unit, it is also possible to other figure layers nested inside figure layer.At HTML(HypertextMarkupLanguage, HTML) element that the body part of document can be placed can be placed in figure layer.Owing to figure layer can be placed on any position of the page, it is thus possible to the object effectively controlled in the page.
In the prior art can be by controlling the show or hide of figure layer, to realize page interaction technique, but relatively strong from hiding to the process vision jumping characteristic shown completely owing to scheming layer in the prior art, affect Consumer's Experience.
Summary of the invention
In view of the above problems, it is proposed that the present invention in case provide a kind of overcome the problems referred to above or at least in part solve the problems referred to above for the method and apparatus showing the page.
According to one aspect of the present invention, provide a kind of method for showing the page, the page includes the first figure layer and the second figure layer being associated with the first figure layer, and second figure layer hide display, method comprises the following steps: detection user's operating position on the page, when operating position enters within the scope of the first figure layer outside the scope of the first figure layer, trigger Overlapping display the second figure layer on the first figure layer；The position of second figure layer is altered in steps, until the position of the second figure layer reaches the first precalculated position in the range of the first figure layer；Make the second figure layer stopping move and reached for first scheduled time；And the position of the second figure layer is set to the second precalculated position on the first figure layer from the first precalculated position；Wherein, after the step in the second precalculated position moved to the first figure layer from the first precalculated position by the second figure layer, method also includes: when user on the page when operating off the first figure layer, hide the second figure layer.
Alternatively, the second figure layer hides display in being in the invisible area of the bottom being positioned at the first figure layer.
Alternatively, user's operating position on the page enters outside the scope of the first figure layer and realizes by cursor slides into the first figure layer and/or clicks on the first figure layer within the scope of the first figure layer.
Alternatively, the first precalculated position lays respectively at two different positions on the first figure layer with the second precalculated position.
According to another aspect of the present invention, provide a kind of equipment for showing the page, the page includes the first figure layer and the second figure layer being associated with the first figure layer, and the second figure layer hides display, equipment includes: detection module, for detecting user's operating position on the page, when operating position enters within the scope of the first figure layer outside the scope of the first figure layer, send and trigger the message of Overlapping display the second figure layer on the first figure layer；And second figure layer present module, after receiving the triggering message that detection module sends, be suitable to be altered in steps the position of the second figure layer, until the position of the second figure layer reaches the first precalculated position in the range of the first figure layer, make the second figure layer stopping move and reached for first scheduled time, and the position of the second figure layer is set to the second precalculated position on the first figure layer from the first precalculated position；Hide module, for when user on the page when operating off described first figure layer, hide described second figure layer.
The method and apparatus being used for showing the page according to the present invention, first the position of second figure layer is altered in steps, then when the first precalculated position in the range of the position of the second figure layer reaches the first figure layer, make the second figure layer stopping move and reached for first scheduled time, finally the position of the second figure layer is set to the second precalculated position on the first figure layer from the first precalculated position, by increasing the intermediate transition process in Overlapping display, i.e. when the first precalculated position in the range of the position of the second figure layer reaches the first figure layer, make the second figure layer stopping move and reached for first scheduled time, thus reduce the jumping characteristic of second figure layer Overlapping display process on the first figure layer, thus improve the visual experience of user.
Described above is only the general introduction of technical solution of the present invention, in order to better understand the technological means of the present invention, and can be practiced according to the content of description, and in order to above and other objects of the present invention, feature and advantage can be become apparent, below especially exemplified by the detailed description of the invention of the present invention.
Accompanying drawing explanation
By reading the detailed description of hereafter preferred implementation, various other advantage and benefit those of ordinary skill in the art be will be clear from understanding.Accompanying drawing is only used for illustrating the purpose of preferred implementation, and is not considered as limitation of the present invention.And in whole accompanying drawing, it is denoted by the same reference numerals identical parts.In the accompanying drawings:
Fig. 1 shows according to an embodiment of the invention for showing the flow chart of the method for the page；And
Fig. 2 shows according to an embodiment of the invention for showing the block diagram of the equipment of the page.
Detailed description of the invention
It is more fully described the exemplary embodiment of the disclosure below with reference to accompanying drawings.Although accompanying drawing showing the exemplary embodiment of the disclosure, it being understood, however, that may be realized in various forms the disclosure and should not limited by embodiments set forth here.On the contrary, it is provided that these embodiments are able to be best understood from the disclosure, and complete for the scope of the present disclosure can be conveyed to those skilled in the art.
Fast development along with internet, applications, the mutual technology of some pages is also the most progressive, and the increasing page uses such as CSS(CascadingStyleSheet, Cascading Style Sheet alternately), the technology such as Javascript code, to realize presenting attractive interface on webpage.
Carry out in the design that the page is mutual at existing utilization figure layer, first on the interface of the page, show the first figure layer, and the picture of certain product can be shown in the first figure layer, when in user's sliding mouse to this first figure layer, meeting Overlapping display the second figure layer on the first figure layer, and in the second figure layer, show the content that the product in the first figure layer is further described.But, in above-mentioned map overlay mode, it is common that after triggering superposition event, Overlapping display the second figure layer on the first figure layer at once.Owing to lacking middle transition process during Overlapping display the second figure layer, the vision jumping characteristic causing Overlapping display the second figure layer is relatively strong, have impact on Consumer's Experience.
To this end, the present invention proposes a kind of method and apparatus for showing the page.The method for showing the page that the present invention proposes is mainly, on the first figure layer during Overlapping display the second figure layer, first the position of second figure layer is altered in steps, then when the first precalculated position in the range of the position of the second figure layer reaches the first figure layer, make the second figure layer stopping move and reached for first scheduled time, finally again the position of the second figure layer is set to the second precalculated position on the first figure layer from the first precalculated position, thus realize the second figure layer in the way of smooth Overlapping display on the first figure layer, thus reduce second figure layer jumping characteristic on the first figure layer during Overlapping display, improve the visual experience of user.Illustrate according to an embodiment of the invention, be suitable to solve the flow chart of the method 100 for showing the page of the problems referred to above below in conjunction with Fig. 1.
As it is shown in figure 1, embodiments of the invention for showing that the method 100 of the page starts from step S110, in step s 110, the first figure layer and the second figure layer being associated with the first figure layer are set.
Alternatively, arranging the first figure layer and the second figure layer being associated with the first figure layer on the page write with html format, can include in text, picture, form, plug-in unit in the first figure layer and the second figure layer is any one or more.Above-mentioned text, picture, form or the plug-in unit being associated in text, picture, form or the plug-in unit that may refer in the first figure layer and the second figure layer is associated, such as the content shown by picture in the second figure layer is further explaining the picture displayed content in the first figure layer.
According to one embodiment of present invention, the first figure layer and the second figure layer are CSS figure layer, and the i.e. first figure layer and the second figure layer can realize with the CSS code in HTML.The CSS code of the such as first figure layer and the second figure layer is as follows:
The initial CSS code of (1) first figure layer (layer_A) is:
#layer_A{display:inline-block；float:left；height:164px;Margin-right:27px;overflow:hidden;position:relative;width:226px;}
Wherein, the CSS style attribute of layer_A includes: display(shows): inline-block(object is rendered as inline object, but the content of object is presented as block object), float(float): the left floating of left(), height(height): 164px(height 164px), margin-right(right hand edge): 27px(distance the right 27px), overflow(overflow): hidden(hide overflow), position(position): relative(relative localization), width(width): 226px(width 226px).By four CSS style attribute height, width, overflow and position of the first figure layer (layer_A), it is that the second figure layer (layer_B) constructs close, father's element of relative localization, this father's element is the first figure layer (layer_A), and daughter element is the second figure layer (layer_B).
The initial CSS code of (2) second figure layers (layer_B) is:
#layer_B{display:block；height:136px;left:14px;position:absolute;top:178px;width:198px;z-index:100;}
Wherein, the CSS style attribute of the second figure layer (layer_B) including: display(shows): block(block object);Height(height): 136px(height 136px);The left(left side away from): 14px(14px From Left);Position(position): absolute(absolute fix);Top(top margin away from): 178px(distance top 178px);Width(width): 198px(width 198px);Z-index(z direction of principal axis height): 100(z-index property value 100).
The position of the second figure layer (layer_B) is set to absolute fix (absolute), and value that the value of the top of the second figure layer (layer_B) is than the height of the first figure layer (layer_A) is bigger so that the second figure layer (layer_B) absolute fix is the invisible area of bottom in the first figure layer (layer_A).
According to one embodiment of present invention, the second figure layer is a daughter element of the first figure layer, when the second figure layer and the first figure layer do not occur superposition, shows the first figure layer.When there is superposition, the second figure layer will be superimposed upon on the first figure layer, and now the first figure layer and the second figure layer can be shown as two click buttons, and user can be linked to different network address respectively by clicking on the first figure layer and the second figure layer.First figure layer (layer_A) it is described below and HTML code that the second figure layer (layer_B) is arranged in the page:
Subsequently, in the step s 120, the second figure layer is hidden.Alternatively, can realize hiding display the second figure layer by arranging as follows: be in the invisible area of the bottom being positioned at the first figure layer by the second figure layer.
When the first figure layer and the second figure layer are CSS figure layer, in the step s 120 by the second figure layer absolute fix in the first figure layer bottom invisible area in.The CSS code hiding the second figure layer can be found in the part of the above-mentioned initial CSS code introducing the second figure layer.
Subsequently, in step s 130, detect user's operating position on the page, when operating position enters within the scope of the first figure layer outside the scope of the first figure layer, trigger Overlapping display the second figure layer on the first figure layer.
Alternatively, user's operating position on the page enters outside the scope of the first figure layer and can realize by being slided into by cursor the first figure layer and/or clicking on the first figure layer within the scope of the first figure layer.
It is, bind the event that mouse enters: onmouseenter on the first figure layer.When mouse enters the first figure layer, trigger Overlapping display the second figure layer on the first figure layer.The example code binding the event that mouse enters on the first figure layer is as follows:
Subsequently, in step S140, the position of second figure layer is altered in steps, until the position of the second figure layer reaches the first precalculated position in the range of the first figure layer.
Alternatively, second figure layer is smooth to be superimposed upon on the first figure layer, until the position of the second figure layer reaches the first precalculated position in the range of the first figure layer, this first precalculated position can be the top of distance from top the first figure layer of the second figure layer be position during preset distance.Animation function animate increased income in Javascript frame J Query such as can be used to realize being altered in steps the position of the second figure layer, being described as follows of this function:
Function:
animate(properties,[duration],[easing],[callback])
Parameter:
Properties: one group of CSS style attribute, animation will move according to above-mentioned attribute.
Duration: one character string or numeral determine how long animation will run.
Easing: the title of erasing effect to be used, acquiescence jQuery provide " linear " and " swing ".
Callback(call back function): the function performed when animation completes.
By animate function, the value of the CSS style attribute top of the second figure layer smoothly reduces from initial value to preset distance value (such as 10px, i.e. 10 pixels), when what namely the second figure layer was smooth moves to an off first precalculated position of top difference 10px of the first figure layer, following step S150 can be performed.Of course, it should be understood that the most do not limit the concrete span of above-mentioned preset distance value.The code realizing step S140 is as follows:
Subsequently, in step S150, the second figure layer is made to stop being moved to for first scheduled time.Subsequently, in step S160, the position of the second figure layer is set to the second precalculated position on the first figure layer from the first precalculated position.Alternatively, the first precalculated position lays respectively at two different positions on the first figure layer with the second precalculated position.
According to one embodiment of present invention, can use following manner that from the first precalculated position, the position of the second figure layer is set to the second precalculated position on the first figure layer, reach the second precalculated position on the first figure layer in a jumped fashion realizing the second figure layer.That is, the CSS style attribute of the second figure layer is set, makes the position attribution of the second figure layer be arranged to the second precalculated position.
Specific in above-mentioned steps, in step S150, when behind the first precalculated position that the second figure layer smoothly arrives at distance the first figure layer top 10px, stop mobile second first scheduled time of figure layer (such as 50 milliseconds), then the CSS style attribute of the second figure layer is set in step S160, making the second figure layer " moment " in a jumped fashion arrive the second precalculated position, example code is as follows:
After step S160, whole method can directly terminate.But in order to strengthen the effect of Consumer's Experience so that after user operation completes, the second figure layer can be hidden, step S170 can be performed after step S160 again.
In step S170, when user on the page when operating off the first figure layer, hide the second figure layer.
Specifically, by arranging the CSS style attribute of the second figure layer, the second figure layer is made to be in the invisible area below the first figure layer.Such as when mouse leaves the first figure layer, it will reset the first figure layer and the CSS style attribute of the second figure layer, again hide the second figure layer.Such as, the function animate of JQuery is used, by the CSS style attribute top of the second figure layer (layer_B) from 0 gradual change to 178px such that it is able to realize hiding the purpose of the second figure layer (layer_B).The CSS code realizing hiding the second figure layer is as follows:
It should be noted that, method shown in Fig. 1 does not limit and carries out by the order of shown each step, the sequencing of each step can be adjusted as required, additionally, described step is also not limited to above-mentioned steps and divides, above-mentioned steps can be further split into more multi-step can also be merged into less step, such as, step S110 is split as two steps, it is also possible to say that step S110 merges with step S120.
Illustrate according to an embodiment of the invention, be suitable to solve a kind of equipment 200 for showing the page of the problems referred to above below in conjunction with Fig. 2.
As in figure 2 it is shown, for showing that the equipment 200 of the page includes in embodiments of the invention: detection module 210 and the second figure layer present module 220.For convenience, Fig. 2 also show the page 20 and the first figure layer 201 in the page 20 and the second figure layer 203 being associated with the first figure layer 201, and the second figure layer 203 hides display.Alternatively, the second figure layer 203 hides display in being in the invisible area of the bottom being positioned at the first figure layer 201.
Alternatively, the first figure layer and the second figure layer are CSS figure layer, and the i.e. first figure layer and the second figure layer can realize with the CSS code in HTML.The CSS code of the such as first figure layer and the second figure layer is as follows:
The initial CSS code of (1) first figure layer (layer_A) is:
#layer_A{display:inline-block；float:left;height:164px;Margin-right:27px;overflow:hidden;position:relative;width:226px;}
Wherein, the CSS style attribute of layer_A includes: display(shows): inline-block(object is rendered as inline object, but the content of object is presented as block object), float(float): the left floating of left(), height(height): 164px(height 164px), margin-right(right hand edge): 27px(distance the right 27px), overflow(overflow): hidden(hide overflow), position(position): relative(relative localization), width(width): 226px(width 226px).By four CSS style attribute height, width, overflow and position of the first figure layer (layer_A), it is that the second figure layer (layer_B) constructs close, father's element of relative localization, this father's element is the first figure layer (layer_A), and daughter element is the second figure layer (layer_B).
The initial CSS code of (2) second figure layers (layer_B) is:
#layer_B{display:block；height:136px;left:14px;position:absolute;top:178px;width:198px;z-index:100;}
Wherein, the CSS style attribute of the second figure layer (layer_B) including: display(shows): block(block object);Height(height): 136px(height 136px);The left(left side away from): 14px(14px From Left);Position(position): absolute(absolute fix);Top(top margin away from): 178px(distance top 178px);Width(width): 198px(width 198px);Z-index(z direction of principal axis height): 100(z-index property value 100).
The position of the second figure layer (layer_B) is set to absolute fix (absolute), and value that the value of the top of the second figure layer (layer_B) is than the height of the first figure layer (layer_A) is bigger so that the second figure layer (layer_B) absolute fix is the invisible area of bottom in the first figure layer (layer_A).
Detection module 210 detects user's operating position on the page 20, when operating position enters within the scope of the first figure layer 201 outside the scope of the first figure layer 201, sends and triggers the message of Overlapping display the second figure layer 203 on the first figure layer 201.
Alternatively, whether detection module 210 slides on the first figure layer 201 by detection cursor and/or clicks on the first figure layer 201 and judge whether user's operating position on the page 20 enters within the scope of the first figure layer 201 outside the scope of the first figure layer 201.Such as: on the first figure layer 201, bind the event that mouse enters: onmouseenter.When detection module 210 detects that the cursor of mouse slides on the first figure layer 201 and/or time near the first figure layer 201, send and trigger the message of Overlapping display the second figure layer 203 on the first figure layer 201.The example code binding the event that mouse enters on the first figure layer 201 is as follows:
Second figure layer present module 220 receive that detection module 210 sends go out messaging after, first the position of second figure layer 203 is altered in steps, until the position of the second figure layer 203 reaches the first precalculated position in the range of the first figure layer 201, make the second figure layer 203 move in the first precalculated position stopping subsequently and reached for first scheduled time, and after first scheduled time, the second precalculated position on the first figure layer 201 will be set to by the position of the second figure layer 203 from the first precalculated position.
Alternatively, the second figure layer presents module 202 and controls that the second figure layer 203 is smooth to be superimposed upon on the first figure layer 201, until the position of the second figure layer 203 reaches the first precalculated position in the range of the first figure layer 201.This first precalculated position can be the top of distance from top the first figure layer 201 of the second figure layer 203 be position during preset distance (such as 10px, i.e. 10 pixels).Animation function animate increased income in Javascript frame J Query such as can be used to realize being altered in steps the position of the second figure layer, by animate function, the value of the CSS style attribute top of the second figure layer 203 smoothly reduces from initial value to preset distance (such as 10px).Of course, it should be understood that the most do not limit the concrete span of above-mentioned preset distance.
Alternatively, when the top of the second figure layer 203 is from difference 10px(the first precalculated position, the top of the first figure layer 201) time, second figure layer presents module 202 and controls to stop mobile second figure layer 203 first scheduled time (such as 50 milliseconds), then the CSS style attribute of the second figure layer 203 is set so that the second figure layer 203 position attribution value is arranged to the second precalculated position.
According to another embodiment of the present invention, in order to strengthen the effect of Consumer's Experience, after user operation is completed, the second figure layer 203 can be hidden, for showing that the equipment 200 of the page also includes hiding module 230, when user on the page 20 when operating off the first figure layer 201, hide module 230 hide the second figure layer 203.
Alternatively, hiding module 230, by arranging the CSS style attribute of the second figure layer, makes the second figure layer move to the invisible area being in below the first figure layer.Such as when mouse leaves the first figure layer, it will reset the first figure layer and the CSS style attribute of the second figure layer, again hide the second figure layer.Such as, the function animate of JQuery is used, by the CSS style attribute top of the second figure layer (layer_B) from 0 gradual change to 178px such that it is able to realize hiding the purpose of the second figure layer (layer_B).
Alternatively, the page 20 is write with html format, and the second figure layer 203 is the daughter element of the first figure layer 201.Such as: the first figure layer 201 and the second figure layer 203 CSS code in HTML realize.
According to another embodiment of the present invention, hide module 230 be further used for by the second figure layer 203 absolute fix in the first figure layer 201 bottom invisible area in.Alternatively, hide module 230 and be further used for the CSS style attribute by arranging the second figure layer 203, make the second figure layer 203 be in the invisible area below the first figure layer 201.
Such as when mouse leaves the first figure layer 201, it will reset the first figure layer 201 and CSS style attribute of the second figure layer 203, again hide the second figure layer 203.Alternatively, the function animate of JQuery is used, by the CSS style attribute top of the second figure layer 203 from 0 gradual change to 178px such that it is able to realize hiding the purpose of the second figure layer 203.
The method and apparatus being used for showing the page according to the present invention, first the position of second figure layer is altered in steps, then when the first precalculated position in the range of the position of the second figure layer reaches the first figure layer, make the second figure layer stopping move and reached for first scheduled time, finally the position of the second figure layer is set to the second precalculated position on the first figure layer from the first precalculated position, by increasing the intermediate transition process in Overlapping display, i.e. when the first precalculated position in the range of the position of the second figure layer reaches the first figure layer, make the second figure layer stopping move and reached for first scheduled time, thus reduce the jumping characteristic of second figure layer Overlapping display process on the first figure layer, thus improve the visual experience of user.
Algorithm and display are not intrinsic to any certain computer, virtual system or miscellaneous equipment relevant provided herein.Various general-purpose systems can also be used together with based on teaching in this.As described above, construct the structure required by this kind of system to be apparent from.Additionally, the present invention is also not for any certain programmed language.It is understood that, it is possible to use various programming languages realize the content of invention described herein, and the description done language-specific above is the preferred forms in order to disclose the present invention.
In description mentioned herein, illustrate a large amount of detail.It is to be appreciated, however, that embodiments of the invention can be put into practice in the case of not having these details.In some instances, it is not shown specifically known method, structure and technology, in order to do not obscure the understanding of this description.
Similarly, it is to be understood that, one or more in order to simplify that the disclosure helping understands in each inventive aspect, above in the description of the exemplary embodiment of the present invention, each feature of the present invention is grouped together in single embodiment, figure or descriptions thereof sometimes.But, the method for the disclosure should not being construed to reflect an intention that, i.e. the present invention for required protection requires than the more feature of feature being expressly recited in each claim.More precisely, as the following claims reflect, inventive aspect is all features less than single embodiment disclosed above.Therefore, it then follows claims of detailed description of the invention are thus expressly incorporated in this detailed description of the invention, the most each claim itself is as the independent embodiment of the present invention.
Those skilled in the art are appreciated that and can adaptively change the module in the equipment in embodiment and they are arranged in one or more equipment different from this embodiment.Module in embodiment or unit or assembly can be combined into a module or unit or assembly, and multiple submodule or subelement or sub-component can be put them in addition.In addition at least some in such feature and/or process or unit excludes each other, can use any combination that all features disclosed in this specification (including adjoint claim, summary and accompanying drawing) and so disclosed any method or all processes of equipment or unit are combined.Unless expressly stated otherwise, each feature disclosed in this specification (including adjoint claim, summary and accompanying drawing) can be replaced by the alternative features providing identical, equivalent or similar purpose.
In addition, those skilled in the art it will be appreciated that, although embodiments more described herein include some feature included in other embodiments rather than further feature, but the combination of the feature of different embodiment means to be within the scope of the present invention and formed different embodiments.Such as, in the following claims, one of arbitrarily can mode the using in any combination of embodiment required for protection.
The all parts embodiment of the present invention can realize with hardware, or realizes with the software module run on one or more processor, or realizes with combinations thereof.It will be understood by those of skill in the art that the some or all functions of the some or all parts in the equipment showing the page that microprocessor or digital signal processor (DSP) can be used in practice to realize according to embodiments of the present invention.The present invention is also implemented as part or all the equipment for performing method as described herein or device program (such as, computer program and computer program).The program of such present invention of realization can store on a computer-readable medium, or can be to have the form of one or more signal.Such signal can be downloaded from internet website and obtain, or provides on carrier signal, or provides with any other form.
The present invention will be described rather than limits the invention to it should be noted above-described embodiment, and those skilled in the art can design alternative embodiment without departing from the scope of the appended claims.In the claims, any reference marks that should not will be located between bracket is configured to limitations on claims.Word " comprises " and does not excludes the presence of the element or step not arranged in the claims.Word "a" or "an" before being positioned at element does not excludes the presence of multiple such element.The present invention by means of including the hardware of some different elements and can realize by means of properly programmed computer.If in the unit claim listing equipment for drying, several in these devices can be specifically to be embodied by same hardware branch.Word first, second and third use do not indicate that any order.Can be title by these word explanations.
Claims (18)
1. for the method that shows the page, the described page includes the first figure layer and the second figure layer being associated with described first figure layer, and described second figure layer hides display, and described method includes step:
Detection user's operating position on the page, when described operating position enters within the scope of described first figure layer outside the scope of described first figure layer, triggers the second figure layer described in Overlapping display on described first figure layer；
The position of described second figure layer is altered in steps, until the position of described second figure layer reaches the first precalculated position in the range of described first figure layer, wherein, described first precalculated position be the top of distance from top the first figure layer of the second figure layer be position during preset distance；
Make described second figure layer stopping move and reached for first scheduled time；And
The position of described second figure layer is set to the second precalculated position on described first figure layer from described first precalculated position；
Wherein, after the step in described the second precalculated position that second figure layer is moved to described first figure layer from described first precalculated position, described method also includes: then when user on the page when operating off described first figure layer, hide described second figure layer.
Method the most according to claim 1, wherein, described second figure layer is in the invisible area of the bottom being positioned at described first figure layer hides display.
Method the most according to claim 1, wherein, described user operating position on the page enters outside the scope of described first figure layer and realizes by cursor slides into described first figure layer and/or clicks on described first figure layer within the scope of described first figure layer.
Method the most according to claim 1, wherein, described first precalculated position lays respectively at two different positions on described first figure layer with described second precalculated position.
5. according to described method arbitrary in claim 1-4, wherein,
The described page is write with html format, and described second figure layer is the daughter element of described first figure layer.
6. according to the method described in claim 5, wherein,
Described first figure layer and described second figure layer are Cascading Style Sheet figure layer.
Method the most according to claim 6, wherein,
Described hide described second figure layer step include: by described second figure layer absolute fix in described first figure layer bottom invisible area in.
Method the most according to claim 5, wherein, described includes the step that the position of described second figure layer is set to the second precalculated position on described first figure layer from described first precalculated position:
The Cascading Style Sheet Style Attributes of described second figure layer is set, makes the position attribution of described second figure layer change to described second precalculated position.
Method the most according to claim 5, described when user on the page when operating off described first figure layer, hide described second figure layer step include:
By arranging the Cascading Style Sheet Style Attributes of described second figure layer, described second figure layer is made to be in the invisible area below described first figure layer.
10., for showing an equipment for the page, the described page includes the first figure layer and the second figure layer being associated with described first figure layer, and described second figure layer hides display, and described equipment includes:
Detection module, for detecting user's operating position on the page, when described operating position enters within the scope of described first figure layer outside the scope of described first figure layer, sends and triggers the message of the second figure layer described in Overlapping display on described first figure layer；And
Second figure layer presents module, after receiving the triggering message that described detection module sends, the position of described second figure layer is altered in steps, until the position of described second figure layer reaches the first precalculated position in the range of described first figure layer, wherein, described first precalculated position be the top of distance from top the first figure layer of the second figure layer be position during preset distance；Make the second figure layer stopping move and reached for first scheduled time；And the position of described second figure layer is set to the second precalculated position on described first figure layer from described first precalculated position；
Hide module, for when user on the page when operating off described first figure layer, hide described second figure layer.
11. equipment according to claim 10, wherein, described second figure layer is in the invisible area of the bottom being positioned at described first figure layer hides display.
12. equipment according to claim 10, wherein, described user operating position on the page enters outside the scope of described first figure layer and realizes by cursor slides into described first figure layer and clicks on described first figure layer within the scope of described first figure layer.
13. equipment according to claim 10, wherein, described first precalculated position and described second precalculated position lay respectively at two diverse locations on described first figure layer.
14. according to described equipment arbitrary in claim 10-13, wherein,
The described page is write with html format, and described second figure layer is the daughter element of described first figure layer.
15. according to the equipment described in claim 14, wherein,
Described first figure layer and described second figure layer are Cascading Style Sheet figure layer.
16. equipment according to claim 15, wherein,
Described hiding module be further used for by described second figure layer absolute fix in described first figure layer bottom invisible area in.
17. equipment according to claim 14, wherein,
Second figure layer presents module and is further used for the Cascading Style Sheet by arranging described second figure layer, makes the position attribution of described second figure layer change to described second precalculated position.
18. equipment according to claim 15, described hiding module is further used for the Cascading Style Sheet Style Attributes by arranging described second figure layer, makes described second figure layer be in the invisible area below described first figure layer.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210530625.XA CN103019516B (en) | 2012-12-10 | 2012-12-10 | For the method and apparatus showing the page |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210530625.XA CN103019516B (en) | 2012-12-10 | 2012-12-10 | For the method and apparatus showing the page |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN103019516A CN103019516A (en) | 2013-04-03 |
| CN103019516B true CN103019516B (en) | 2016-08-03 |
Family
ID=47968176
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201210530625.XA Expired - Fee Related CN103019516B (en) | 2012-12-10 | 2012-12-10 | For the method and apparatus showing the page |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN103019516B (en) |
Families Citing this family (18)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103034410B (en) * | 2012-12-10 | 2016-01-13 | 北京奇虎科技有限公司 | The method and apparatus of page display |
| CN104978723B (en) * | 2014-04-14 | 2018-04-03 | 阿里巴巴集团控股有限公司 | A kind of image processing method and device |
| CN104133650A (en) * | 2014-07-26 | 2014-11-05 | 珠海市君天电子科技有限公司 | Acceleration ball display method and display terminal |
| CN105447041A (en) * | 2014-09-02 | 2016-03-30 | 阿里巴巴集团控股有限公司 | Webpage processing method and device |
| CN104391834A (en) * | 2014-12-11 | 2015-03-04 | 成都明日星辰科技有限公司 | Method for annotating electronic book content |
| CN104571813B (en) * | 2014-12-12 | 2019-03-29 | 百度在线网络技术（北京）有限公司 | A kind of display methods and device of information |
| CN106202097B (en) * | 2015-05-05 | 2019-12-03 | 阿里巴巴集团控股有限公司 | Picture display method and device |
| KR102468120B1 (en) * | 2016-01-27 | 2022-11-22 | 삼성전자 주식회사 | Method and electronic device processing an input using view layers |
| CN106708356B (en) * | 2016-08-31 | 2019-03-01 | 腾讯科技（深圳）有限公司 | Call tag methods of exhibiting and device |
| CN106406698A (en) * | 2016-09-09 | 2017-02-15 | 广州视睿电子科技有限公司 | Image displaying method and device |
| CN106648585B (en) * | 2016-09-22 | 2020-10-09 | 北京小米移动软件有限公司 | Method and device for setting transparency of webpage DOM (document object model) element |
| CN109117211A (en) * | 2017-06-22 | 2019-01-01 | 合网络技术（北京）有限公司 | object control method and device |
| CN107562852B (en) * | 2017-08-28 | 2020-12-25 | 网易乐得科技有限公司 | Method, medium, device and computing equipment for displaying page in browser |
| CN108196931A (en) * | 2018-01-30 | 2018-06-22 | 深圳市富途网络科技有限公司 | A kind of floating layer display module and method for display extension information |
| CN108803968B (en) * | 2018-06-29 | 2019-04-16 | 掌阅科技股份有限公司 | The Multiview linkage method of user's display interface calculates equipment and storage medium |
| CN110245251A (en) * | 2019-06-24 | 2019-09-17 | 重庆佳渝测绘有限公司 | A kind of comparison display methods of soil situation |
| CN112817501A (en) * | 2019-11-18 | 2021-05-18 | 腾讯科技（深圳）有限公司 | Method and related device for displaying media content |
| CN110908757B (en) * | 2019-11-18 | 2022-01-28 | 腾讯科技（深圳）有限公司 | Method and related device for displaying media content |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102411468A (en) * | 2010-09-26 | 2012-04-11 | 腾讯科技（深圳）有限公司 | Method and device for exhibiting information by utilizing animation |
| CN103034410A (en) * | 2012-12-10 | 2013-04-10 | 北京奇虎科技有限公司 | Method and equipment for page display |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6720981B1 (en) * | 1999-12-08 | 2004-04-13 | International Business Machines Corporation | Method, system and program product for animated web page construction and display |
-
2012
- 2012-12-10 CN CN201210530625.XA patent/CN103019516B/en not_active Expired - Fee Related
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102411468A (en) * | 2010-09-26 | 2012-04-11 | 腾讯科技（深圳）有限公司 | Method and device for exhibiting information by utilizing animation |
| CN103034410A (en) * | 2012-12-10 | 2013-04-10 | 北京奇虎科技有限公司 | Method and equipment for page display |
Non-Patent Citations (1)
| Title |
|---|
| 基于JQuery的图片动态特效设计与实现;刘伟等;《Computer Era》;20111231(第10期);第24-29页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN103019516A (en) | 2013-04-03 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103019516B (en) | For the method and apparatus showing the page | |
| CN103034410B (en) | The method and apparatus of page display | |
| CN107396194B (en) | Bullet screen display method and client | |
| KR102118223B1 (en) | Cross window animation | |
| US7673251B1 (en) | Panel presentation | |
| US7956869B1 (en) | Proximity based transparency of windows aiding in obscured window selection | |
| US9395884B2 (en) | Method and system for navigating between pages | |
| US8861890B2 (en) | System and method for assembling and displaying individual images as a continuous image | |
| US10878175B2 (en) | Portlet display on portable computing devices | |
| CN104636120A (en) | Multi-window display method and device of browser | |
| WO2015094779A1 (en) | Touch-based reorganization of page element | |
| WO2009122214A2 (en) | Presentation of objects in stereoscopic 3d displays | |
| US10872450B2 (en) | Method and apparatus for displaying information by animation | |
| CN104268250A (en) | Playing method and device of video elements in web page | |
| CN105335071A (en) | Method and device for displaying page elements | |
| CN103472983A (en) | Method and device for positioning page contents | |
| US9767081B2 (en) | Method and apparatus for displaying a webpage in a mobile terminal | |
| CN104424318A (en) | Method and device for controlling page elements | |
| CN102830910A (en) | Method and system for realizing page reading mode of touch screen equipment | |
| US20150213148A1 (en) | Systems and methods for browsing | |
| US10795564B2 (en) | Content display control method and user terminal for performing content display control method | |
| CN102609414A (en) | Picture hot zone highlighting display method, device and system based on browser | |
| CN105320432A (en) | Scroll bar display method and apparatus | |
| CN103838508A (en) | Method and device for controlling display of intelligent terminal interface | |
| CN102999598A (en) | Method and equipment for changing display state of content in webpage |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C41 | Transfer of patent application or patent right or utility model | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20160511 Address after: 100041 room, room 2, building 2, No. 17 West Road, Beijing, Shijingshan District, China Applicant after: Beijing World Star Technology Co.,Ltd. Address before: 100088 Beijing city Xicheng District xinjiekouwai Street 28, block D room 112 (Desheng Park) Applicant before: BEIJING QIHOO TECHNOLOGY Co.,Ltd. Applicant before: Qizhi software (Beijing) Co.,Ltd. |
|
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant | ||
| CF01 | Termination of patent right due to non-payment of annual fee |
Granted publication date: 20160803 |
|
| CF01 | Termination of patent right due to non-payment of annual fee |