CN103034410B - The method and apparatus of page display - Google Patents
The method and apparatus of page display Download PDFInfo
- Publication number
- CN103034410B CN103034410B CN201210530285.0A CN201210530285A CN103034410B CN 103034410 B CN103034410 B CN 103034410B CN 201210530285 A CN201210530285 A CN 201210530285A CN 103034410 B CN103034410 B CN 103034410B
- Authority
- CN
- China
- Prior art keywords
- layer
- page
- precalculated position
- scope
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 48
- 230000008859 change Effects 0.000 claims abstract description 10
- 238000001514 detection method Methods 0.000 claims description 9
- 230000005540 biological transmission Effects 0.000 claims description 2
- 230000008569 process Effects 0.000 abstract description 13
- 230000009191 jumping Effects 0.000 abstract description 6
- 230000000007 visual effect Effects 0.000 abstract description 4
- 230000006870 function Effects 0.000 description 12
- 241000699666 Mus <mouse, genus> Species 0.000 description 10
- 230000008901 benefit Effects 0.000 description 3
- 238000010586 diagram Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 230000007704 transition Effects 0.000 description 3
- 238000004590 computer program Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 1
- 238000012163 sequencing technique Methods 0.000 description 1
- 230000009897 systematic effect Effects 0.000 description 1
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses the method and apparatus of a kind of page display, the wherein page the second layer of comprising the first layer and being associated with the first layer, and the second layer hides display, method comprises step: detect the operating position of user on the page, time within the scope that operating position enters the first layer outside the scope of the first layer, trigger Overlapping display second layer on the first layer; Progressively change the position of the second layer, until the position of the second layer reaches the first precalculated position within the scope of the first layer; Second layer stopping is moved and reached for first schedule time; And the second precalculated position position of the second layer is set to from the first precalculated position on the first layer.Reduce the jumping characteristic of the Overlapping display process of the second layer in the first layer, thus improve the visual experience of user.
Description
Technical field
The present invention relates to field of computer technology, be specifically related to the method and apparatus of a kind of page display.
Background technology
Layer provides a kind of means control effectively to page object, and layer can comprise text, picture, form, plug-in unit, also can inside layer other layer nested.At HTML(HypertextMarkupLanguage, HTML (Hypertext Markup Language)) element that the body part of document can be placed can put into layer.Because layer can be placed on any position of the page, thus effectively can control the object in the page.
In the prior art by controlling the show or hide of layer, to realize page interaction technique, but because layer is comparatively strong from hiding to the process vision jumping characteristic shown completely in the prior art, affect Consumer's Experience.
Summary of the invention
In view of the above problems, propose the present invention in case provide a kind of overcome the problems referred to above or solve the problem at least in part the page display method and apparatus.
According to one aspect of the present invention, provide the method for a kind of page display, the second layer that the page comprises the first layer and is associated with the first layer, and the second layer hides display, method comprises the following steps: detect the operating position of user on the page, time within the scope that operating position enters the first layer outside the scope of the first layer, trigger Overlapping display second layer on the first layer; Progressively change the position of the second layer, until the position of the second layer reaches the first precalculated position within the scope of the first layer; Second layer stopping is moved and reached for first schedule time; And the second precalculated position position of the second layer is set to from the first precalculated position on the first layer.
Alternatively, the invisible area that the second layer is in the bottom being arranged in the first layer hides display.
Alternatively, realize by cursor being slided into the first layer and/or clicking the first layer within the scope that the operating position of user on the page enters the first layer outside the scope of the first layer.
Alternatively, the first precalculated position and the second precalculated position lay respectively at the different position of in the first layer two.
Alternatively, after the step the second layer being moved to the second precalculated position on the first layer from the first precalculated position, method also comprises: when the first layer is left in the operation of user on the page, hides the second layer.
According to another aspect of the present invention, provide the equipment of a kind of page display, the second layer that the page comprises the first layer and is associated with the first layer, and the hiding display of the second layer, equipment comprises: detection module, for detecting the operating position of user on the page, time within the scope that operating position enters the first layer outside the scope of the first layer, send the message triggering Overlapping display second layer on the first layer; And second layer present module, after the Trigger message receiving detection module transmission, be suitable for the position progressively changing the second layer, until the position of the second layer reaches the first precalculated position within the scope of the first layer, second layer stopping is moved and reached for first schedule time, and the position of the second layer is set to the second precalculated position on the first layer from the first precalculated position.
The method and apparatus that the page according to the present invention shows, first the position of the second layer is progressively changed, then when the position of the second layer reaches the first precalculated position within the scope of the first layer, second layer stopping is moved and reached for first schedule time, finally the position of the second layer is set to the second precalculated position on the first layer from the first precalculated position, by increasing the intermediate transition process in Overlapping display, namely when the position of the second layer reaches the first precalculated position within the scope of the first layer, second layer stopping is moved and reached for first schedule time, reduce the jumping characteristic of the Overlapping display process of the second layer in the first layer thus, thus improve the visual experience of user.
Above-mentioned explanation is only the general introduction of technical solution of the present invention, in order to technological means of the present invention can be better understood, and can be implemented according to the content of instructions, and can become apparent, below especially exemplified by the specific embodiment of the present invention to allow above and other objects of the present invention, feature and advantage.
Accompanying drawing explanation
By reading hereafter detailed description of the preferred embodiment, various other advantage and benefit will become cheer and bright for those of ordinary skill in the art.Accompanying drawing only for illustrating the object of preferred implementation, and does not think limitation of the present invention.And in whole accompanying drawing, represent identical parts by identical reference symbol.In the accompanying drawings:
Fig. 1 shows the process flow diagram of the method for page display according to an embodiment of the invention; And
Fig. 2 shows the block diagram of the equipment of page display according to an embodiment of the invention.
Embodiment
Below with reference to accompanying drawings exemplary embodiment of the present disclosure is described in more detail.Although show exemplary embodiment of the present disclosure in accompanying drawing, however should be appreciated that can realize the disclosure in a variety of manners and not should limit by the embodiment set forth here.On the contrary, provide these embodiments to be in order to more thoroughly the disclosure can be understood, and complete for the scope of the present disclosure can be conveyed to those skilled in the art.
Along with the fast development of internet, applications, the mutual technology of some pages is also in continuous progress, and the increasing page adopts such as CSS(CascadingStyleSheet alternately, Cascading Style Sheet), the technology such as Javascript code, to realize presenting attractive interface on webpage.
Carry out in the mutual design of the page in the existing layer that utilizes, first on the interface of the page, the first layer is shown, and the picture of certain product can be shown in the first layer, when in user's sliding mouse to this first layer, meeting Overlapping display second layer in the first layer, and in the second layer, show the content that the product in the first layer is further described.But, in above-mentioned map overlay mode, normally after triggering superposition event, Overlapping display second layer in the first layer at once.Owing to lacking middle transition process in the process of Overlapping display second layer, cause the vision jumping characteristic of Overlapping display second layer comparatively strong, have impact on Consumer's Experience.
For this reason, the present invention proposes the method and apparatus of a kind of page display.The method of the page display that the present invention proposes mainly, on the first layer during Overlapping display the second layer, first the position of the second layer is progressively changed, then when the position of the second layer reaches the first precalculated position within the scope of the first layer, second layer stopping is moved and reached for first schedule time, last the second the precalculated position again position of the second layer is set to from the first precalculated position on the first layer, thus realize the second layer with level and smooth mode Overlapping display in the first layer, reduce the jumping characteristic of the second layer in the first layer in Overlapping display process thus, improve the visual experience of user.Illustrate according to an embodiment of the invention, be suitable for the process flow diagram of the method 100 of the page display solved the problem below in conjunction with Fig. 1.
As shown in Figure 1, the method 100 of the page display of embodiments of the invention starts from step S110, in step s 110, and the second layer the first layer being set and being associated with the first layer.
Alternatively, the second layer page write with html format arranging the first layer and is associated with the first layer, what can comprise in text, picture, form, plug-in unit in the first layer and the second layer is any one or more.Above-mentioned text, picture, form or the plug-in unit that can refer in the first layer that be associated is associated with the text in the second layer, picture, form or plug-in unit, and such as, the content shown by picture in the second layer is the further explanation explanation to the picture displayed content in the first layer.
According to one embodiment of present invention, the first layer and the second layer are CSS layer, and namely the first layer and the second layer can realize with the CSS code in HTML.The CSS code of such as the first layer and the second layer is as follows:
The initial CSS code of (1) first 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 Attributes of layer_A comprises: display(show): inline-block(object is presented as inline object, but the content of object is presented as block object), float(float): left(a left side float), height(height): 164px(height 164px), margin-right(right hand edge): 27px(distance the right 27px), overflow(overflow): hidden(hide overflow), position(position): relative(relative positioning), width(width): 226px(width 226px).By four CSS Style Attributes height, width, overflow and position of the first layer (layer_A), be that the second layer (layer_B) constructs father's element that is closed, relative positioning, this father's element is the first layer (layer_A), and daughter element is the second layer (layer_B).
The initial CSS code of (2) second layer (layer_B) is:
#layer_B{display:block；height:136px;left:14px;position:absolute;top:178px;width:198px;z-index:100;}
Wherein, the CSS Style Attributes of the second layer (layer_B) comprising: display(shows): block(block object); Height(height): 136px(height 136px); Left(left side distance): 14px(From Left 14px); Position(position): absolute(absolute fix); Top(top margin distance): 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 layer (layer_B) is set to absolute fix (absolute), and second the value of top of layer (layer_B) larger than the value of the height of the first layer (layer_A), make the invisible area of the second layer (layer_B) absolute fix bottom in the first layer (layer_A).
According to one embodiment of present invention, the second layer is a daughter element of the first layer, when superposition does not occur for the second layer and the first layer, shows the first layer.When there is superposition, the second layer will be superimposed upon in the first layer, and now the first layer and the second layer can be shown as two button clicks, and user can be linked to different network address respectively by click first layer and the second layer.Introduce the first layer (layer_A) and the second layer (layer_B) below and be arranged on HTML code in the page:
Subsequently, in the step s 120, the second layer is hidden.Alternatively, hiding display second layer is realized by arranging as follows: the invisible area the second layer being in the bottom being arranged in the first layer.
When the first layer and the second layer are CSS layer, in the step s 120 by the invisible area of the second layer absolute fix bottom in the first layer.The CSS code hiding the second layer can see the above-mentioned part introducing the initial CSS code of the second layer.
Subsequently, in step s 130, which, detect the operating position of user on the page, time within the scope that operating position enters the first layer outside the scope of the first layer, trigger Overlapping display second layer on the first layer.
Alternatively, realize by cursor being slided into the first layer and/or clicking the first layer within the scope that the operating position of user on the page enters the first layer outside the scope of the first layer.
Namely, the first layer is bound the event that mouse enters: onmouseenter.When mouse enters the first layer, trigger Overlapping display second layer on the first layer.The example code that first layer is bound the event that mouse enters is as follows:
Subsequently, in step S140, progressively change the position of the second layer, until the position of the second layer reaches the first precalculated position within the scope of the first layer.
Alternatively, second layer is smoothly superimposed upon in the first layer, until the position of the second layer reaches the first precalculated position within the scope of the first layer, the position that this first precalculated position can be the top of distance from top first layer of the second layer when being preset distance.Such as can use Javascript framework of increasing income---the animation function animate in JQuery realizes progressively changing the position of the second layer, being described as follows of this function:
Function:
animate(properties,[duration],[easing],[callback])
Parameter:
Properties: one group of CSS Style Attributes, animation will move according to above-mentioned attribute.
Duration: one character string or numeral determine how long animation will run.
Easing: the title of the erasing effect that use, acquiescence jQuery provides " linear " and " swing ".
Callback(call back function): the function performed when animation completes.
By animate function, the value of the CSS Style Attributes top of the second layer is reduced to preset distance value (such as 10px smoothly from initial value, i.e. 10 pixels), when what namely the second layer was level and smooth move to from first precalculated position of the top difference 10px of the first layer, following step S150 can be performed.It is appreciated of course that, do not limit the concrete span of above-mentioned preset distance value in an embodiment of the present invention.The code realizing step S140 is as follows:
Subsequently, in step S150, the second layer stopping is moved and reached for first schedule time.Subsequently, in step S160, the position of the second layer is set to the second precalculated position on the first layer from the first precalculated position.Alternatively, the first precalculated position and the second precalculated position lay respectively at the different position of in the first layer two.
According to one embodiment of present invention, the second precalculated position that the position of the second layer is set to from the first precalculated position on the first layer by following manner can be adopted, reach the second precalculated position on the first layer in a jumped fashion to realize the second layer.That is, the CSS Style Attributes of the second layer is set, makes the position attribution of the second layer be set to the second precalculated position.
Specific in above-mentioned steps, in step S150, after the second layer arrives first precalculated position at distance the first 10px place, layer top smoothly, stop mobile second layer first schedule time (such as 50 milliseconds), then the CSS Style Attributes of the second layer is set in step S160, make the second layer in a jumped fashion " instantaneously " 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, after user operation is completed, the second layer can be hidden, after step S160, step S170 can be performed again.
In step S170, when the first layer is left in the operation of user on the page, hide the second layer.
Particularly, by arranging the CSS Style Attributes of the second layer, the second layer is made to be in invisible area below the first layer.Such as, when mouse leaves the first layer, the CSS Style Attributes of the first layer and the second layer will be reset, again hide the second layer.Such as, use the function animate of JQuery, by the CSS Style Attributes top of the second layer (layer_B) from 0 gradual change to 178px, thus the object of hiding second layer (layer_B) can be realized.The CSS code realizing hiding the second layer is as follows:
It should be noted that, method shown in Fig. 1 does not limit is undertaken by the order of shown each step, the sequencing of each step can be adjusted as required, in addition, described step is also not limited to above-mentioned steps and divides, above-mentioned steps can split into more multi-step further also can be merged into less step, such as, step S110 is split as two steps, also can says that step S110 and step S120 merges.
Illustrate according to an embodiment of the invention, be suitable for the equipment 200 of a kind of page display solved the problem below in conjunction with Fig. 2.
As shown in Figure 2, in embodiments of the invention, the equipment 200 of page display comprises: detection module 210 and the second layer present module 220.For convenience of description, the second layer 203 that also show the page 20 and the first layer 201 in the page 20 in Fig. 2 and be associated with the first layer 201, and the second layer 203 hides display.Alternatively, the invisible area that the second layer 203 is in the bottom being arranged in the first layer 201 hides display.
Alternatively, the first layer and the second layer are CSS layer, and namely the first layer and the second layer can realize with the CSS code in HTML.The CSS code of such as the first layer and the second layer is as follows:
The initial CSS code of (1) first 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 Attributes of layer_A comprises: display(show): inline-block(object is presented as inline object, but the content of object is presented as block object), float(float): left(a left side float), height(height): 164px(height 164px), margin-right(right hand edge): 27px(distance the right 27px), overflow(overflow): hidden(hide overflow), position(position): relative(relative positioning), width(width): 226px(width 226px).By four CSS Style Attributes height, width, overflow and position of the first layer (layer_A), be that the second layer (layer_B) constructs father's element that is closed, relative positioning, this father's element is the first layer (layer_A), and daughter element is the second layer (layer_B).
The initial CSS code of (2) second layer (layer_B) is:
#layer_B{display:block；height:136px;left:14px;position:absolute;top:178px;width:198px;z-index:100;}
Wherein, the CSS Style Attributes of the second layer (layer_B) comprising: display(shows): block(block object); Height(height): 136px(height 136px); Left(left side distance): 14px(From Left 14px); Position(position): absolute(absolute fix); Top(top margin distance): 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 layer (layer_B) is set to absolute fix (absolute), and second the value of top of layer (layer_B) larger than the value of the height of the first layer (layer_A), make the invisible area of the second layer (layer_B) absolute fix bottom in the first layer (layer_A).
Detection module 210 detects the operating position of user on the page 20, time within the scope that operating position enters the first layer 201 outside the scope of the first layer 201, sends the message triggering Overlapping display second layer 203 on the first layer 201.
Alternatively, by detecting cursor and whether sliding in the first layer 201 and/or click the first layer 201, detection module 210 judges whether the operating position of user on the page 20 enters within the scope of the first layer 201 outside the scope of the first layer 201.Such as: in the first layer 201, bind the event that mouse enters: onmouseenter.When detection module 210 detect the cursor of mouse to slide in the first layer 201 and/or near the first layer 201 time, send the message triggering Overlapping display second layer 203 on the first layer 201.The example code that first layer 201 is bound the event that mouse enters is as follows:
Second layer presents module 220 after receiving the message of setting out that detection module 210 sends, first the position of the second layer 203 is progressively changed, until the position of the second layer 203 reaches the first precalculated position in the first layer 201 scope, make the second layer 203 move in the first precalculated position stopping subsequently and reached for first schedule time, and after first schedule time, the position by the second layer 203 is set to the second precalculated position on the first layer 201 from the first precalculated position.
Alternatively, the second layer presents module 202 and controls the second layer 203 and be smoothly superimposed upon in the first layer 201, until the position of the second layer 203 reaches the first precalculated position in the first layer 201 scope.The position that this first precalculated position can be the top of distance from top first layer 201 of the second layer 203 when being preset distance (such as 10px, i.e. 10 pixels).Such as can use Javascript framework of increasing income---the animation function animate in JQuery realizes progressively changing the position of the second layer, by animate function, the value of the CSS Style Attributes top of the second layer 203 is reduced to preset distance (such as 10px) smoothly from initial value.It is appreciated of course that, do not limit the concrete span of above-mentioned preset distance in an embodiment of the present invention.
Alternatively, when the second layer 203 top from the first layer 201 top difference 10px(first precalculated position) time, second layer presents module 202 and controls to stop mobile second layer 203 first schedule time (such as 50 milliseconds), then the CSS Style Attributes of the second layer 203 is set, makes the second layer 203 position attribution value be set 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 layer 203 can be hidden, the equipment 200 of page display also comprises hiding module 230, when the first layer 201 is left in the operation of user on the page 20, hide module 230 and hide the second layer 203.
Alternatively, hiding module 230 by arranging the CSS Style Attributes of the second layer, making the second layer move to the invisible area be in below the first layer.Such as, when mouse leaves the first layer, the CSS Style Attributes of the first layer and the second layer will be reset, again hide the second layer.Such as, use the function animate of JQuery, by the CSS Style Attributes top of the second layer (layer_B) from 0 gradual change to 178px, thus the object of hiding second layer (layer_B) can be realized.
Alternatively, the page 20 is write with html format, and the second layer 203 is daughter elements of the first layer 201.Such as: the first layer 201 and the CSS code of the second layer 203 in HTML realize.
According to another embodiment of the present invention, hide module 230 and be further used in the invisible area of the second layer 203 absolute fix bottom in the first layer 201.Alternatively, hiding the CSS Style Attributes that module 230 is further used for by arranging the second layer 203, making the second layer 203 be in invisible area below the first layer 201.
Such as, when mouse leaves the first layer 201, the CSS Style Attributes of the first layer 201 and the second layer 203 will be reset, again hide the second layer 203.Alternatively, use the function animate of JQuery, by the CSS Style Attributes top of the second layer 203 from 0 gradual change to 178px, thus the object of hiding second layer 203 can be realized.
The method and apparatus that the page according to the present invention shows, first the position of the second layer is progressively changed, then when the position of the second layer reaches the first precalculated position within the scope of the first layer, second layer stopping is moved and reached for first schedule time, finally the position of the second layer is set to the second precalculated position on the first layer from the first precalculated position, by increasing the intermediate transition process in Overlapping display, namely when the position of the second layer reaches the first precalculated position within the scope of the first layer, second layer stopping is moved and reached for first schedule time, reduce the jumping characteristic of the Overlapping display process of the second layer in the first layer thus, thus improve the visual experience of user.
Intrinsic not relevant to any certain computer, virtual system or miscellaneous equipment with display at this algorithm provided.Various general-purpose system also can with use based on together with this teaching.According to description above, the structure constructed required by this type systematic is apparent.In addition, the present invention is not also for any certain programmed language.It should be understood that and various programming language can be utilized to realize content of the present invention described here, and the description done language-specific is above to disclose preferred forms of the present invention.
In instructions provided herein, describe a large amount of detail.But can understand, embodiments of the invention can be put into practice when not having these details.In some instances, be not shown specifically known method, structure and technology, so that not fuzzy understanding of this description.
Similarly, be to be understood that, in order to simplify the disclosure and to help to understand in each inventive aspect one or more, in the description above to exemplary embodiment of the present invention, each feature of the present invention is grouped together in single embodiment, figure or the description to it sometimes.But, the method for the disclosure should be construed to the following intention of reflection: namely the present invention for required protection requires feature more more than the feature clearly recorded in each claim.Or rather, as claims below reflect, all features of disclosed single embodiment before inventive aspect is to be less than.Therefore, the claims following embodiment are incorporated to this embodiment thus clearly, and wherein each claim itself is as independent embodiment of the present invention.
Those skilled in the art are appreciated that and adaptively can 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.Except at least some in such feature and/or process or unit be mutually repel except, any combination can be adopted to combine all processes of all features disclosed in this instructions (comprising adjoint claim, summary and accompanying drawing) and so disclosed any method or equipment or unit.Unless expressly stated otherwise, each feature disclosed in this instructions (comprising adjoint claim, summary and accompanying drawing) can by providing identical, alternative features that is equivalent or similar object replaces.
In addition, those skilled in the art can understand, although embodiments more described herein to comprise in other embodiment some included feature instead of further feature, the combination of the feature of different embodiment means and to be within scope of the present invention and to form different embodiments.Such as, in the following claims, the one of any of embodiment required for protection can use with arbitrary array mode.
All parts embodiment of the present invention with hardware implementing, or can realize with the software module run on one or more processor, or realizes with their combination.It will be understood by those of skill in the art that the some or all functions that microprocessor or digital signal processor (DSP) can be used in practice to realize the some or all parts in the equipment shown according to the page of the embodiment of the present invention.The present invention can also be embodied as part or all equipment for performing method as described herein or device program (such as, computer program and computer program).Realizing program of the present invention and can store on a computer-readable medium like this, or the form of one or more signal can be had.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 instead of limit the invention to it should be noted above-described embodiment, and those skilled in the art can design alternative embodiment when not departing from the scope of claims.In the claims, any reference symbol between bracket should be configured to limitations on claims.Word " comprises " not to be got rid of existence and does not arrange element in the claims or step.Word "a" or "an" before being positioned at element is not got rid of and be there is multiple such element.The present invention can by means of including the hardware of some different elements and realizing by means of the computing machine of suitably programming.In the unit claim listing some devices, several in these devices can be carry out imbody by same hardware branch.Word first, second and third-class use do not represent any order.Can be title by these word explanations.
Claims (20)
1. a method for page display, the second layer that the described page comprises the first layer and is associated with described first layer, and described second layer hides display, described method comprises step:
Detect the operating position of user on the page, time within the scope that described operating position enters described first layer outside the scope of described first layer, trigger the second layer described in Overlapping display on described first layer;
Progressively change the position of described second layer, until the position of described second layer reaches the first precalculated position within the scope of described first layer;
Described second layer stopping is moved and reached for first schedule time; And
The position of described second layer is set to the second precalculated position on described first layer from described first precalculated position.
2. method according to claim 1, wherein, the invisible area that described second layer is in the bottom being arranged in described first layer hides display.
3. method according to claim 1, wherein, realize by cursor being slided into described first layer and/or clicking described first layer within the scope that the operating position of described user on the page enters described first layer outside the scope of described first layer.
4. method according to claim 1, wherein, described first precalculated position and described second precalculated position lay respectively at the different position of in described first layer two.
5. method according to claim 1, wherein, described by the second layer from after described first precalculated position moves to the step in the second precalculated position on described first layer, described method also comprises:
When described first layer is left in the operation of user on the page, hide described second layer.
6. according to described method arbitrary in claim 1-5, wherein,
The described page is write with html format, and described second layer is the daughter element of described first layer.
7. according to the method described in claim 6, wherein,
Described first layer and described second layer are Cascading Style Sheet layer.
8. method according to claim 7, wherein,
The described step hiding described second layer comprises: by the invisible area of described second layer absolute fix bottom in described first layer.
9. method according to claim 6, wherein, the step in described the second precalculated position be set on described first layer from described first precalculated position the position of described second layer comprises:
The Cascading Style Sheet Style Attributes of described second layer is set, makes the position attribution of described second layer change to described second precalculated position.
10. method according to claim 6, described when described first layer is left in the operation of user on the page, the step hiding described second layer comprises:
By arranging the Cascading Style Sheet Style Attributes of described second layer, described second layer is made to be in invisible area below described first layer.
The equipment of 11. 1 kinds of page displays, the second layer that the described page comprises the first layer and is associated with described first layer, and also described second layer hides display, and described equipment comprises:
Detection module, for detecting the operating position of user on the page, time within the scope that described operating position enters described first layer outside the scope of described first layer, send the message triggering the second layer described in Overlapping display on described first layer; And
Second layer presents module, after the Trigger message receiving the transmission of described detection module, is suitable for: the position progressively changing described second layer, until the position of described second layer reaches the first precalculated position within the scope of described first layer; Second layer stopping is moved and reached for first schedule time; And the second precalculated position position of described second layer is set to from described first precalculated position on described first layer.
12. equipment according to claim 11, wherein, the invisible area that described second layer is in the bottom being arranged in described first layer hides display.
13. equipment according to claim 11, wherein, realize by cursor being slided into described first layer and clicking described first layer within the scope that the operating position of described user on the page enters described first layer outside the scope of described first layer.
14. equipment according to claim 11, wherein, described first precalculated position and described second precalculated position lay respectively at two diverse locations in described first layer.
15. equipment according to claim 11, also comprise hiding module, for when described first layer is left in the operation of user on the page, hide described second layer.
16. according to described equipment arbitrary in claim 11-15, wherein,
The described page is write with html format, and described second layer is the daughter element of described first layer.
17. according to the equipment described in claim 16, wherein,
Described first layer and described second layer are Cascading Style Sheet layer.
18. equipment according to claim 17, wherein,
Described hiding module is further used in the invisible area of described second layer absolute fix bottom in described first layer.
19. equipment according to claim 16, wherein,
Second layer presents the Cascading Style Sheet that module is further used for by arranging described second layer, makes the position attribution of described second layer change to described second precalculated position.
20. equipment according to claim 17, described hiding module is further used for the Cascading Style Sheet Style Attributes by arranging described second layer, makes described second layer be in invisible area below described first layer.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210530285.0A CN103034410B (en) | 2012-12-10 | 2012-12-10 | The method and apparatus of page display |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210530285.0A CN103034410B (en) | 2012-12-10 | 2012-12-10 | The method and apparatus of page display |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN103034410A CN103034410A (en) | 2013-04-10 |
| CN103034410B true CN103034410B (en) | 2016-01-13 |
Family
ID=48021353
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201210530285.0A Active CN103034410B (en) | 2012-12-10 | 2012-12-10 | The method and apparatus of page display |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN103034410B (en) |
Families Citing this family (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103019516B (en) * | 2012-12-10 | 2016-08-03 | 北京世界星辉科技有限责任公司 | For the method and apparatus showing the page |
| CN104216711B (en) * | 2014-09-01 | 2017-10-31 | 安一恒通（北京）科技有限公司 | The rendering intent and device of control |
| CN104392345A (en) * | 2014-11-25 | 2015-03-04 | 金张秀 | Office automation system and file control method in same |
| CN106202097B (en) * | 2015-05-05 | 2019-12-03 | 阿里巴巴集团控股有限公司 | Picture display method and device |
| CN109634476B (en) * | 2018-11-29 | 2021-10-15 | 武汉兴图新科电子股份有限公司 | C # language-based two-dimensional visualization layer device display control method and system |
| CN110245251A (en) * | 2019-06-24 | 2019-09-17 | 重庆佳渝测绘有限公司 | A kind of comparison display methods of soil situation |
| CN110781331A (en) * | 2019-10-14 | 2020-02-11 | 维沃移动通信有限公司 | Picture display method, electronic equipment and computer readable storage medium |
| CN110795097B (en) * | 2019-11-04 | 2021-12-14 | 腾讯科技（深圳）有限公司 | Page processing method and device, computer equipment and storage medium |
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 |
| CN103019516A (en) * | 2012-12-10 | 2013-04-03 | 北京奇虎科技有限公司 | Method and equipment for displaying page |
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 CN201210530285.0A patent/CN103034410B/en active Active
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 |
| CN103019516A (en) * | 2012-12-10 | 2013-04-03 | 北京奇虎科技有限公司 | Method and equipment for displaying page |
Non-Patent Citations (1)
| Title |
|---|
| 基于JQuery的图片动态特效设计与实现;刘伟等;《Computer Era》;20111231(第10期);第24-29页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN103034410A (en) | 2013-04-10 |
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 | |
| US7673251B1 (en) | Panel presentation | |
| US9135022B2 (en) | Cross window animation | |
| US10878175B2 (en) | Portlet display on portable computing devices | |
| US9395884B2 (en) | Method and system for navigating between pages | |
| US20110050687A1 (en) | Presentation of Objects in Stereoscopic 3D Displays | |
| US9761034B2 (en) | Animation emulating live web page content resizing | |
| WO2013074991A1 (en) | Computer-implemented apparatus, system, and method for three dimensional modeling software | |
| CN104636120A (en) | Multi-window display method and device of browser | |
| WO2005003913A2 (en) | System and method for providing a webpage | |
| CN103853712A (en) | Display method of floating layer window and browser | |
| CN105094804A (en) | Method and apparatus for adding animation to page | |
| CN104268251A (en) | Playing method and device of video elements in web page | |
| GB2536354A (en) | Method for intelligent web reference preloading based on user behavior prediction | |
| US10108322B2 (en) | Dynamic video effects for interactive videos | |
| CN105637464A (en) | Scroll end effects for websites and content | |
| CN104268252A (en) | Playing method and device of video elements in web page | |
| CN104679485A (en) | Page element control method and device | |
| CN104424318A (en) | Method and device for controlling page elements | |
| CN103235737A (en) | Frameset-based browser dialog box simulation method | |
| CN102981853B (en) | A kind of Text Entry by webpage submits long article method and apparatus originally to | |
| CN105320432A (en) | Scroll bar display method and apparatus | |
| CN102915349A (en) | Method for displaying webpage in browser and webpage component displayed in browser | |
| 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 | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20220715 Address after: Room 801, 8th floor, No. 104, floors 1-19, building 2, yard 6, Jiuxianqiao Road, Chaoyang District, Beijing 100015 Patentee after: BEIJING QIHOO TECHNOLOGY Co.,Ltd. Address before: 100088 room 112, block D, 28 new street, new street, Xicheng District, Beijing (Desheng Park) Patentee before: BEIJING QIHOO TECHNOLOGY Co.,Ltd. Patentee before: Qizhi software (Beijing) Co.,Ltd. |