CN103019516B - For the method and apparatus showing the page - Google Patents

Abstract

The invention discloses a method and device for displaying a page, wherein the page includes a first layer and a second layer associated with the first layer, and the second layer is hidden and displayed, and the device includes: a detection module, It is used to detect the user’s operation position on the page; and the second layer presentation module, after receiving the trigger message sent by the detection module, is adapted to: gradually change the position of the second layer until the second layer Until the position of the second layer reaches a first predetermined position within the range of the first layer; making the second layer stop moving for a first predetermined time; and changing the position of the second layer from the first predetermined time The position is set as a second predetermined position above the first layer; a hiding module is configured to hide the second layer when the user's operation on the page leaves the first layer. The jumpiness of the superimposed display process of the second layer on the first layer is reduced, thereby improving the user's visual experience.

Description

Method and device for displaying pages

technical field

The present invention relates to the field of computer technology, in particular to a method and device for displaying pages.

Background technique

Layers provide a means to effectively control page objects. Layers can include text, pictures, tables, plug-ins, and other layers can be nested in layers. All elements that can be placed in the body of an HTML (HypertextMarkupLanguage, Hypertext Markup Language) document can be placed in the layer. Because the layer can be placed anywhere on the page, it can effectively control the objects on the page.

In the prior art, the page interaction technology can be realized by controlling the display or hiding of the layer, but in the prior art, the process of the layer from hiding to fully displaying has a strong visual jump, which affects the user experience.

Contents of the invention

In view of the above problems, the present invention is proposed to provide a method and device for displaying pages that overcome the above problems or at least partially solve the above problems.

According to one aspect of the present invention, a method for displaying a page is provided, the page includes a first layer and a second layer associated with the first layer, and the second layer is hidden and displayed, the method includes the following steps : Detect the user's operation position on the page. When the operation position enters the range of the first layer from outside the range of the first layer, trigger the superimposed display of the second layer on top of the first layer; gradually change the position of the second layer until the position of the second layer reaches a first predetermined position within the range of the first layer; stop the movement of the second layer for a first predetermined time; and change the position of the second layer from The first predetermined position is set as a second predetermined position above the first layer; wherein, after the step of moving the second layer from the first predetermined position to the second predetermined position above the first layer, the method further Including: hide the second layer when the user's operation on the page leaves the first layer.

Optionally, the second layer is displayed hidden in an invisible area located at the bottom of the first layer.

Optionally, the user's operation position on the page is realized by sliding the cursor onto the first layer and/or clicking the first layer from outside the range of the first layer to within the range of the first layer.

Optionally, the first predetermined position and the second predetermined position are respectively located at two different positions on the first layer.

According to another aspect of the present invention, a device for displaying a page is provided, the page includes a first layer and a second layer associated with the first layer, and the second layer is hidden and displayed, and the device includes: The detection module is used to detect the user's operation position on the page. When the operation position enters the range of the first layer from outside the range of the first layer, a trigger is sent to overlay and display the second layer on top of the first layer. layer message; and the second layer presentation module, after receiving the trigger message sent by the detection module, is adapted to gradually change the position of the second layer until the position of the second layer reaches the range of the first layer Up to the first predetermined position, the second layer is stopped to move for the first predetermined time, and the position of the second layer is set to the second predetermined position above the first layer from the first predetermined position; the hidden module uses The second layer is hidden when the user's operation on the page leaves the first layer.

According to the method and device for displaying pages of the present invention, the position of the second layer is first gradually changed, and then when the position of the second layer reaches the first predetermined position within the range of the first layer, the second layer is Stop moving for a first predetermined time, and finally set the position of the second layer from the first predetermined position to a second predetermined position above the first layer, by increasing the intermediate transition process in the superimposed display, that is, when the second image When the position of the layer reaches the first predetermined position within the range of the first layer, the second layer stops moving for the first predetermined time, thereby reducing the jumpiness of the superimposed display process of the second layer on the first layer , thereby improving the user's visual experience.

The above description is only an overview of the technical solution of the present invention. In order to better understand the technical means of the present invention, it can be implemented according to the contents of the description, and in order to make the above and other purposes, features and advantages of the present invention more obvious and understandable , the specific embodiments of the present invention are enumerated below.

Description of drawings

Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiment. The drawings are only for the purpose of illustrating a preferred embodiment and are not to be considered as limiting the invention. Also throughout the drawings, the same reference numerals are used to designate the same parts. In the attached picture:

FIG. 1 shows a flowchart of a method for displaying a page according to an embodiment of the present invention; and

Fig. 2 shows a block diagram of a device for displaying pages according to an embodiment of the present invention.

detailed description

Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be embodied in various forms and should not be limited by the embodiments set forth herein. Rather, these embodiments are provided for more thorough understanding of the present disclosure and to fully convey the scope of the present disclosure to those skilled in the art.

With the rapid development of Internet applications, some page interaction technologies are also constantly improving. More and more page interactions use technologies such as CSS (CascadingStyleSheet, cascading style sheets), Javascript codes, etc., to achieve attractive presentation on web pages. force interface.

In the existing design of using layers for page interaction, the first layer is firstly displayed on the interface of the page, and a picture of a certain product can be displayed in the first layer. When the user slides the mouse to the first picture When in the first layer, the second layer will be superimposed on the first layer, and the content that further describes the products in the first layer will be displayed in the second layer. However, in the above layer overlay method, usually after the overlay event is triggered, the second layer is overlaid and displayed on the first layer immediately. Due to the lack of an intermediate transition process in the process of superimposing and displaying the second layer, the visual jump of the superimposed display of the second layer is strong, which affects user experience.

To this end, the present invention proposes a method and device for displaying pages. The method for displaying pages proposed by the present invention is mainly to change the position of the second layer gradually when the second layer is superimposed on the first layer, and then when the position of the second layer reaches the position of the first image When the first predetermined position within the layer range, stop the movement of the second layer for the first predetermined time, and finally set the position of the second layer from the first predetermined position to the second predetermined position above the first layer , so that the second layer can be superimposed and displayed on the first layer in a smooth manner, thereby reducing jumping during the superimposed display process of the second layer on the first layer, and improving the user's visual experience. A flow chart of a method 100 for displaying a page according to an embodiment of the present invention and suitable for solving the above-mentioned problems will be described in detail below with reference to FIG. 1 .

As shown in FIG. 1 , the method 100 for displaying a page according to the embodiment of the present invention starts at step S110, and in step S110, a first layer and a second layer associated with the first layer are set.

Optionally, set the first layer and the second layer associated with the first layer on the page written in HTML format, the first layer and the second layer can include text, pictures, tables, plug-ins Any one or more of the . The above-mentioned association may mean that the text, picture, table or plug-in in the first layer is associated with the text, picture, table or plug-in in the second layer, for example, the content displayed by the picture in the second layer is the Further explanation of what the picture in the first layer shows.

According to an embodiment of the present invention, the first layer and the second layer are CSS layers, that is, the first layer and the second layer can be implemented with CSS codes in HTML. For example, the CSS codes of the first layer and the second layer are as follows:

(1) The initial CSS code of the first layer (layer_A) is:

#layer_A{display:inline-block; float:left; height:164px;margin-right:27px;overflow:hidden;position:relative;width:226px;}

Among them, the CSS style attributes of layer_A include: display (display): inline-block (the object is rendered as an inline object, but the content of the object is rendered as a block object), float (floating): left (floating left), height (height) : 164px (height 164px), margin-right (right edge): 27px (27px from the right), overflow (overflow): hidden (hidden overflow), position (position): relative (relative positioning), width (width): 226px (width 226px). Through the four CSS style attributes height, width, overflow and position of the first layer (layer_A), a closed and relatively positioned parent element is constructed for the second layer (layer_B), which is the first layer (layer_A), the child element is the second layer (layer_B).

(2) The initial CSS code of the second layer (layer_B) is:

#layer_B{display:block;height:136px;left:14px;position:absolute;top:178px;width:198px;z-index:100;}

Among them, the CSS style properties of the second layer (layer_B) include: display (display): block (block object); height (height): 136px (height 136px); left (left margin): 14px (14px from the left); position (position): absolute (absolute positioning); top (top margin): 178px (178px from the top); width (width): 198px (width 198px); z-index (z-axis height): 100 (z- index attribute value 100).

The position of the second layer (layer_B) is set to absolute positioning (absolute), and the value of top of the second layer (layer_B) is larger than the value of height of the first layer (layer_A), so that the second layer ( layer_B) absolutely positioned in the bottom invisible area in the first layer (layer_A).

According to an embodiment of the present invention, the second layer is a child element of the first layer, and when the second layer and the first layer do not overlap, the first layer is displayed. When superposition occurs, the second layer will be superimposed on the first layer. At this time, the first layer and the second layer can be displayed as two click buttons, and the user can click the first layer and the second layer to each link to a different URL. The following introduces the HTML code for setting the first layer (layer_A) and the second layer (layer_B) in the page:

Subsequently, in step S120, the second layer is hidden. Optionally, the second layer may be hidden and displayed through the following settings: placing the second layer in an invisible area at the bottom of the first layer.

When the first layer and the second layer are CSS layers, in step S120, the second layer is absolutely positioned in the invisible area at the bottom of the first layer. For the CSS code of hiding the second layer, please refer to the above-mentioned part introducing the initial CSS code of the second layer.

Subsequently, in step S130, the user's operation position on the page is detected, and when the operation position enters the range of the first layer from outside the range of the first layer, triggering the overlay display of the first layer on the first layer Second layer.

Optionally, the user's operation position on the page can be realized by sliding the cursor onto the first layer and/or clicking on the first layer from outside the range of the first layer to within the range of the first layer .

That is, bind the mouse entry event on the first layer: onmouseenter. When the mouse enters the first layer, trigger to display the second layer superimposed on the first layer. The code example of binding the mouse entry event on the first layer is as follows:

Subsequently, in step S140, the position of the second layer is gradually changed until the position of the second layer reaches a first predetermined position within the range of the first layer.

Optionally, the second layer is smoothly superimposed on the first layer until the position of the second layer reaches a first predetermined position within the range of the first layer, and the first predetermined position may be an Top is the predetermined distance from the top of the first layer. For example, you can use the animation function animate in JQuery, an open source Javascript framework, to gradually change the position of the second layer. The description of this function is as follows:

function:

animate(properties,[duration],[easing],[callback])

parameter:

Properties: A set of CSS style properties, the animation will move according to the above properties.

Duration: A string or number that determines how long the animation will run.

Easing: The name of the erasing effect to use, by default jQuery provides "linear" and "swing".

Callback (callback function): The function that is executed when the animation completes.

Through the animate function, the value of the CSS style property top of the second layer is smoothly reduced from the initial value to a predetermined distance value (for example, 10px, that is, 10 pixels), that is, the second layer moves smoothly to the distance from the first layer When the first predetermined position differs by 10px from the top of , the following step S150 will be executed. Of course, it can be understood that, in the embodiment of the present invention, the specific value range of the foregoing predetermined distance value is not limited. The code for realizing step S140 is as follows:

Subsequently, in step S150, the movement of the second layer is stopped for a first predetermined time. Subsequently, in step S160, the position of the second layer is set from the first predetermined position to a second predetermined position above the first layer. Optionally, the first predetermined position and the second predetermined position are respectively located at two different positions on the first layer.

According to an embodiment of the present invention, the position of the second layer can be set from the first predetermined position to the second predetermined position above the first layer in the following manner, so as to realize that the second layer reaches the first layer by jumping A second predetermined position above a layer. That is, the CSS style property of the second layer is set so that the position property of the second layer is set to the second predetermined position.

Specifically in the above steps, in step S150, when the second layer smoothly reaches the first predetermined position 10px from the top of the first layer, stop moving the second layer for the first predetermined time (for example, 50 milliseconds), Then set the CSS style attribute of the second layer in step S160, so that the second layer "instantly" reaches the second predetermined position in a jumping manner, the code example is as follows:

After step S160, the whole method can end directly. However, in order to enhance the effect of user experience so that the second layer can be hidden after the user operation is completed, step S170 can be performed after step S160.

In step S170, when the user's operation on the page leaves the first layer, the second layer is hidden.

Specifically, by setting the CSS style property of the second layer, the second layer is placed in an invisible area below the first layer. For example, when the mouse leaves the first layer, the CSS style properties of the first layer and the second layer will be reset, and the second layer will be hidden again. For example, use the function animate of JQuery to gradually change the CSS style property top of the second layer (layer_B) from 0 to 178px, so as to realize the purpose of hiding the second layer (layer_B). The CSS code to hide the second layer is as follows:

It should be noted that the method shown in Figure 1 is not limited to the order of the steps shown, and the order of the steps can be adjusted as needed. In addition, the steps are not limited to the division of the above steps, and the above steps can be Further splitting into more steps can also be combined into fewer steps, for example, step S110 is split into two steps, or step S110 can be combined with step S120.

A device 200 for displaying pages according to an embodiment of the present invention and adapted to solve the above problems will be described below with reference to FIG. 2 .

As shown in FIG. 2 , the device 200 for displaying pages in the embodiment of the present invention includes: a detection module 210 and a second layer presentation module 220 . For the sake of illustration convenience, the page 20, the first layer 201 in the page 20 and the second layer 203 associated with the first layer 201 are also shown in FIG. 2, and the second layer 203 is hidden and displayed . Optionally, the second layer 203 is hidden in an invisible area located at the bottom of the first layer 201 .

Optionally, the first layer and the second layer are CSS layers, that is, the first layer and the second layer can be implemented with CSS codes in HTML. For example, the CSS codes of the first layer and the second layer are as follows:

(1) The initial CSS code of the first layer (layer_A) is:

#layer_A{display:inline-block;float:left;height:164px;margin-right:27px;overflow:hidden;position:relative;width:226px;}

Among them, the CSS style attributes of layer_A include: display (display): inline-block (the object is rendered as an inline object, but the content of the object is rendered as a block object), float (floating): left (floating left), height (height) : 164px (height 164px), margin-right (right edge): 27px (27px from the right), overflow (overflow): hidden (hidden overflow), position (position): relative (relative positioning), width (width): 226px (width 226px). Through the four CSS style attributes height, width, overflow and position of the first layer (layer_A), a closed and relatively positioned parent element is constructed for the second layer (layer_B), which is the first layer (layer_A), the child element is the second layer (layer_B).

(2) The initial CSS code of the second layer (layer_B) is:

#layer_B{display:block;height:136px;left:14px;position:absolute;top:178px;width:198px;z-index:100;}

Among them, the CSS style properties of the second layer (layer_B) include: display (display): block (block object); height (height): 136px (height 136px); left (left margin): 14px (14px from the left); position (position): absolute (absolute positioning); top (top margin): 178px (178px from the top); width (width): 198px (width 198px); z-index (z-axis height): 100 (z- index attribute value 100).

The position of the second layer (layer_B) is set to absolute positioning (absolute), and the value of top of the second layer (layer_B) is larger than the value of height of the first layer (layer_A), so that the second layer ( layer_B) absolutely positioned in the bottom invisible area in the first layer (layer_A).

The detection module 210 detects the user's operation position on the page 20, and when the operation position enters the range of the first layer 201 from outside the range of the first layer 201, a trigger is sent to overlay display on the first layer 201 The message of the second layer 203 .

Optionally, the detection module 210 determines whether the user's operation position on the page 20 enters from outside the range of the first layer 201 by detecting whether the cursor slides onto the first layer 201 and/or clicks on the first layer 201 within the scope of the first layer 201. For example: on the first layer 201, bind the event of mouse entry: onmouseenter. When the detection module 210 detects that the cursor of the mouse slides on and/or near the first layer 201 , it sends a message triggering the overlay display of the second layer 203 on the first layer 201 . A code example of binding a mouse entry event on the first layer 201 is as follows:

After receiving the departure message sent by the detection module 210, the second layer presentation module 220 first gradually changes the position of the second layer 203 until the position of the second layer 203 reaches the first predetermined position within the range of the first layer 201. position, then make the second layer 203 stop moving at the first predetermined position for a first predetermined time, and after the first predetermined time, set the position passing through the second layer 203 from the first predetermined position to the first figure A second predetermined position above layer 201.

Optionally, the second layer presentation module 202 controls the second layer 203 to be smoothly superimposed on the first layer 201 until the position of the second layer 203 reaches a first predetermined position within the range of the first layer 201 . The first predetermined position may be a position when the top of the second layer 203 is a predetermined distance (for example, 10px, ie, 10 pixels) from the top of the first layer 201 . For example, the animation function animate in JQuery, an open source Javascript framework, can be used to gradually change the position of the second layer. Through the animate function, the value of the CSS style attribute top of the second layer 203 is smoothly reduced from the initial value to a predetermined value. distance (eg 10px). Of course, it can be understood that, in the embodiment of the present invention, the specific value range of the foregoing predetermined distance is not limited.

Optionally, when the top of the second layer 203 is 10px (first predetermined position) away from the top of the first layer 201, the second layer presentation module 202 controls to stop moving the second layer 203 for a first predetermined time ( For example, 50 milliseconds), and then set the CSS style property of the second layer 203, so that the value of the position property of the second layer 203 is set to the second predetermined position.

According to another embodiment of the present invention, in order to enhance the effect of user experience, the second layer 203 can be hidden after the user operation is completed, and the device 200 for displaying the page further includes a hiding module 230. When the user is on the page 20 When the operation leaves the first layer 201, the hiding module 230 hides the second layer 203.

Optionally, the hiding module 230 moves the second layer to an invisible area below the first layer by setting the CSS style property of the second layer. For example, when the mouse leaves the first layer, the CSS style properties of the first layer and the second layer will be reset, and the second layer will be hidden again. For example, use the function animate of JQuery to gradually change the CSS style property top of the second layer (layer_B) from 0 to 178px, so as to realize the purpose of hiding the second layer (layer_B).

Optionally, the page 20 is written in HTML format, and the second layer 203 is a child element of the first layer 201 . For example: the first layer 201 and the second layer 203 are implemented with CSS codes in HTML.

According to another embodiment of the present invention, the hiding module 230 is further used to absolutely position the second layer 203 in the invisible area at the bottom of the first layer 201 . Optionally, the hiding module 230 is further configured to make the second layer 203 an invisible area under the first layer 201 by setting the CSS style attribute of the second layer 203 .

For example, when the mouse leaves the first layer 201, the CSS style properties of the first layer 201 and the second layer 203 will be reset, and the second layer 203 will be hidden again. Optionally, the CSS style attribute top of the second layer 203 is gradually changed from 0 to 178px by using the function animate of JQuery, so that the purpose of hiding the second layer 203 can be realized.

According to the method and device for displaying pages of the present invention, the position of the second layer is first gradually changed, and then when the position of the second layer reaches the first predetermined position within the range of the first layer, the second layer is Stop moving for a first predetermined time, and finally set the position of the second layer from the first predetermined position to a second predetermined position above the first layer, by increasing the intermediate transition process in the superimposed display, that is, when the second image When the position of the layer reaches the first predetermined position within the range of the first layer, the second layer stops moving for the first predetermined time, thereby reducing the jumpiness of the superimposed display process of the second layer on the first layer , thereby improving the user's visual experience.

The algorithms and displays presented herein are not inherently related to any particular computer, virtual system, or other device. Various generic systems can also be used with the teachings based on this. The structure required to construct such a system is apparent from the above description. Furthermore, the present invention is not specific to any particular programming language. It should be understood that various programming languages can be used to implement the content of the present invention described herein, and the above description of specific languages is for disclosing the best mode of the present invention.

In the description provided herein, numerous specific details are set forth. However, it is understood that embodiments of the invention may be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been shown in detail in order not to obscure the understanding of this description.

Similarly, it should be appreciated that in the foregoing description of exemplary embodiments of the invention, in order to streamline this disclosure and to facilitate an understanding of one or more of the various inventive aspects, various features of the invention are sometimes grouped together in a single embodiment, figure, or its description. This method of disclosure, however, is not to be interpreted as reflecting an intention that the claimed invention requires more features than are expressly recited in each claim. Rather, as the following claims reflect, inventive aspects lie in less than all features of a single foregoing disclosed embodiment. Thus, the claims following the Detailed Description are hereby expressly incorporated into this Detailed Description, with each claim standing on its own as a separate embodiment of this invention.

Those skilled in the art can understand that the modules in the device in the embodiment can be adaptively changed and arranged in one or more devices different from the embodiment. Modules or units or components in the embodiments may be combined into one module or unit or component, and furthermore may be divided into a plurality of sub-modules or sub-units or sub-assemblies. All features disclosed in this specification (including accompanying claims, abstract and drawings), as well as any method or method so disclosed, may be used in any combination, except that at least some of such features and/or processes or units are mutually exclusive. All processes or units of equipment are combined. Each feature disclosed in this specification (including accompanying claims, abstract and drawings) may be replaced by alternative features serving the same, equivalent or similar purpose, unless expressly stated otherwise.

Furthermore, those skilled in the art will understand that although some embodiments described herein include some features included in other embodiments but not others, combinations of features from different embodiments are meant to be within the scope of the invention. and form different embodiments. For example, in the following claims, any of the claimed embodiments may be used in any combination.

The various component embodiments of the present invention may be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. Those skilled in the art should understand that a microprocessor or a digital signal processor (DSP) may be used in practice to implement some or all functions of some or all components in the device for displaying pages according to the embodiment of the present invention. The present invention can also be implemented as an apparatus or an apparatus program (for example, a computer program and a computer program product) for performing a part or all of the methods described herein. Such a program for realizing the present invention may be stored on a computer-readable medium, or may be in the form of one or more signals. Such a signal may be downloaded from an Internet site, or provided on a carrier signal, or provided in any other form.

It should be noted that the above-mentioned embodiments illustrate rather than limit the invention, and that those skilled in the art will be able to design alternative embodiments without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word "comprising" does not exclude the presence of elements or steps not listed in a claim. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The invention can be implemented by means of hardware comprising several distinct elements, and by means of a suitably programmed computer. In a unit claim enumerating several means, several of these means can be embodied by one and the same item of hardware. The use of the words first, second, and third, etc. does not indicate any order. These words can be interpreted as names.

Claims (18)

1. A method for displaying a page, the page comprising a first layer and a second layer associated with the first layer, and the second layer is hidden and displayed, the method comprising steps : Detect the user's operation position on the page, and when the operation position enters the range of the first layer from outside the range of the first layer, trigger an overlay display on the first layer said second layer; gradually changing the position of the second layer until the position of the second layer reaches a first predetermined position within the range of the first layer, wherein the first predetermined position is the position of the second layer The position at which the top is at a predetermined distance from the top of the first layer; stopping movement of the second layer for a first predetermined time; and setting the position of the second layer from the first predetermined position to a second predetermined position above the first layer; Wherein, after the step of moving the second layer from the first predetermined position to the second predetermined position above the first layer, the method further includes: then when the user operates on the page When leaving the first layer, the second layer is hidden. 2. The method of claim 1, wherein the second layer is displayed hidden in an invisible area located at the bottom of the first layer. 3. The method according to claim 1, wherein the user's operation position on the page enters from outside the range of the first layer into the range of the first layer by sliding the cursor to the on and/or clicking on said first layer. 4. The method according to claim 1, wherein the first predetermined position and the second predetermined position are respectively located at two different positions on the first layer. 5. The method according to any one of claims 1-4, wherein, The page is written in HTML format, and the second layer is a child element of the first layer. 6. The method according to claim 5, wherein, The first layer and the second layer are cascading style sheet layers. 7. The method of claim 6, wherein, The step of hiding the second layer includes: absolutely positioning the second layer in the invisible area at the bottom of the first layer. 8. The method of claim 5, wherein the step of setting the position of the second layer from the first predetermined position to a second predetermined position above the first layer comprises: The cascading style sheet style attribute of the second layer is set, so that the position attribute of the second layer is changed to the second predetermined position. 9. The method according to claim 5, said step of hiding said second layer when the user's operation on the page leaves said first layer comprises: By setting the cascading style sheet style attribute of the second layer, the second layer is placed in an invisible area below the first layer. 10. A device for displaying a page, the page comprising a first layer and a second layer associated with the first layer, and the second layer is hidden and displayed, the device comprising: A detection module, configured to detect the user's operation position on the page, and when the operation position enters the range of the first layer from outside the range of the first layer, send a trigger on the first layer displaying the message of the second layer superimposed on the layer; and The second layer presentation module, after receiving the trigger message sent by the detection module, gradually changes the position of the second layer until the position of the second layer reaches the range of the first layer. until the first predetermined position, wherein the first predetermined position is the position when the top of the second layer is a predetermined distance from the top of the first layer; the second layer is stopped for a first predetermined time; and the position of the second layer is set from the first predetermined position to a second predetermined position above the first layer; A hiding module, configured to hide the second layer when the user's operation on the page leaves the first layer. 11. The device of claim 10, wherein the second layer is displayed hidden in an invisible area located at the bottom of the first layer. 12. The device according to claim 10, wherein the user's operation position on the page enters from outside the range of the first layer into the range of the first layer by sliding the cursor to the on the first layer and click on the first layer. 13. The apparatus according to claim 10, wherein the first predetermined position and the second predetermined position are respectively located at two different positions on the first layer. 14. The apparatus according to any one of claims 10-13, wherein, The page is written in HTML format, and the second layer is a child element of the first layer. 15. The apparatus according to claim 14, wherein, The first layer and the second layer are cascading style sheet layers. 16. The apparatus of claim 15, wherein, The hiding module is further configured to absolutely position the second layer in the bottom invisible area of the first layer. 17. The apparatus of claim 14, wherein, The second layer presentation module is further configured to change the position attribute of the second layer to the second predetermined position by setting the cascading style sheet of the second layer. 18. The device according to claim 15, wherein the hidden module is further configured to make the second layer under the first layer by setting the cascading style sheet style attribute of the second layer invisible area.