Research on the problem of flip navigation with tilted mouse
|
In this article, we will analyze the production of a tilted mouse flip navigation as an example, hoping to help some friends who still have questions about the production of mouse flip navigation. The day before yesterday, a friend online sent me a page and asked me to help her figure out why the mouse rollover could not be achieved. I opened the source file and took a look, and found that the author did not even have a mouse rollover feature. And not enough thought was given to tilt navigation. Although I noticed these problems at the time, I didn't have time to explain them to her because I was finishing a project. Just finished my work yesterday, and now I picked up the file to take a look. I found that many knowledge points can be explained through this incident. Some places are easy to be ignored, but they are indeed very critical. Let's first take a look at the effects we want to achieve. Of course, before we do it, these can only exist in our minds or sketches. We must first think about what it looks like, and then we can analyze how to achieve the desired effect. Without further ado, let's look at the picture first:  When we look at the picture above, we may feel that it is nothing and seems easy to do. Well, let's analyze this effect in detail. If we use the standard implementation, we cannot directly insert an image into HTML. To do it in a standard way, you need to use CSS to call the image as the background. So let's see if such navigation can be called directly. Are there any problems? Please take a look at the enlarged picture of this navigation effect:   Please note that the "danger zone" in the above picture is very obvious. If we put two tilted positive blocks together, there will inevitably be a repeated area. Our current CSS does not support special-shaped processing. To solve this problem, the two blocks must overlap. Overlapping requires placing them on different levels. This requires the use of positioning in CSS: "position: static | absolute | fixed | relative". To do mouse rollover, we usually make all the backgrounds into one picture, and then use CSS to set the different positions of the pictures under different tags. Maybe someone would think that the background image of this navigation should be like this:  If you really think so, then the problem arises: when the mouse is rolled over in any of the five blocks, the repeated parts of the danger zone above will block a corner of the left and right navigation. So the normal way is:   Only in this way can it be used as the final background image without the danger zone. Of course, it should also be noted that the background is not white but transparent. The main purpose is not to blend with the background of the website. The key is not to block the adjacent background in the danger zone. I use GIF images, and when GIF images are transparent, there will be some rough edges. If you want to deal with different color website backgrounds, it is best to use PNG or make the edges of the GIF image into pixels. After thinking about this background image, we need to think about how to make this navigation. Let’s analyze the mouse rollover first. Originally, mouse rollover was done by JS, but now we can use CSS’s :hover to achieve this effect, with less code and clear structure. So the flipping of these five navigations is achieved by A:hover. |
<<: Selection and thinking of MySQL data backup method
>>: How to use the Marquee tag in XHTML code
Recommend
Solution to high CPU usage of Tomcat process
Table of contents Case Context switching overhead...
js to implement the snake game with comments
This article example shares the specific code of ...
A simple and effective solution to forget the initial password when installing MySQL
When you install MySQL, you will be given an init...
Deep understanding of line-height and vertical-align
Several concepts Line box: A box that wraps an in...
Analysis of three parameters of MySQL replication problem
Table of contents 01 sql_slave_skip_counter param...
Introduction to new ECMAscript object features
Table of contents 1. Object properties 1.1 Attrib...
The pitfalls and solutions caused by the default value of sql_mode in MySQL 5.7
During normal project development, if the MySQL v...
Detailed explanation of the front-end framework for low-threshold development of iOS, Android, and mini-program applications
Nowadays, cross-platform development technology i...
How to generate Hive table creation statement comment script in MySQL metadata
Preface This article mainly introduces the releva...
Solve the problem of invalid utf8 settings in mysql5.6
After the green version of mysql5.6 is decompress...
How to install theano and keras on ubuntu system
Note: The system is Ubuntu 14.04LTS, a 32-bit ope...
Web Design Tutorial (4): About Materials and Expressions
<br />Previous Web Design Tutorial: Web Desi...
9 great JavaScript framework scripts for drawing charts on the web
9 great JavaScript framework scripts for drawing ...
Detailed explanation of the role of the default database after MySQL installation
When you learn MySQL, you will find that it comes...
Detailed explanation of the relationship between Linux and GNU systems
Table of contents What is the Linux system that w...