Images and other resource source networks. If your rights are violated, please let us know. Thank you!
Advantages and disadvantages of turning over
Advantages: 1. A normal background image is the same as a background image floating with the mouse. So you only need to download it once. This reduces the number of http request requests, which greatly improves the page efficiency. (The two articles on how to improve the efficiency of webpages were adopted by it168, it will take two weeks to release. Sorry .).
2: because the same image is used, it must have been downloaded to the local device. So when the mouse float up, the change is very fast (because it is local), so there will be no "a long time after the mouse float to see the replacement image.
Disadvantages:
1: Make a new image if you want to change the image. The maintenance cost is relatively high (however, if there is an artist, it will not be a problem ).
2: Sometimes you need to calculate pixels to display exactly.
Implementation:
See figure 1. They are displayed in the normal state and after the mouse float. We can achieve the desired effect as long as the above is displayed normally while the mouse is floating up. With this idea, it is easy to implement. A container label. The height is set to half the size of the image (1), and the width is equal to that of the transformed image. Then, set the background image of the container as a conversion image. In normal cases, the top part is displayed. Then, when the mouse is floating up, use the css-style pseudo class: hover to display the background image to the bottom part.
For ease of understanding and explanation, we will use an example below. The sum in this example is shown above. We recommend that you download the Demo to your local machine to better study its code.
The front-end XHTML code is simple, just an unordered list.
<Body>
<Ul id = "menu">
<Li> <a href = "#" class = "home"> Home <span> </a> </li>
<Li> <a href = "#" class = "about"> About <span> </a> </li>
<Li> <a href = "#" class = "rss"> RSS <span> </a> </li>
</Ul>
</Body>
</Html>
The key is in the CSS file. Let's take the "Home" menu as an example to see how it is implemented. The following is the key code for implementing the "Home" menu flip:
/* Css style in normal state */The following css style is the core code. Use the pseudo-class: hover to "flip" the image ":
# Menu a: hover {This is a simple flip menu. In addition, because the style is set through "# menu a: hover", it is suitable for all a under the menu. For different columns, as long as the style is shown as "# menu. you can set them separately. Of course, all the background conversion images are of the same size, and the up and down images should be "folded" through the middle horizontal line.
A friend may ask, <a> in <li> and <span> in <li>, what is the purpose? In fact, this has nothing to do with "turning the door, it is only used for decoration. It is used to display the menu description image, for example, "go to home" (3) on the "home" menu)
A few other nonsense wordsMany of my friends are interested in the importance of web standard design and want to learn it. However, many friends standing at the door of "web standard design" feel confused and confused. These things are very annoying and messy ". Indeed, because there is no unified standard, both firefox and M $ IE have their respective page parsing methods, which leads to a very messy situation. Therefore, it also makes learners feel "annoying" and "Chaotic. This kind of feeling may not be completely solved at this stage, but we are very pleased to see that IE7 has taken a big step in supporting web standards. We believe that in the near future, the web standard design will become more popular.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
