Ideas and implementation code for pop-up boxes on the side of web pages produced by javascript_javascript skills

It’s the weekend. It’s time to summarize tomorrow. I feel that I have learned something, but I feel that I have not learned much. I will analyze it tomorrow. Let’s first look at the issues to be analyzed today.

Everyone is familiar with pictures like this:

————————————

Today we will analyze and make it. First, let’s introduce the characteristics of this pop-up box:

* Always attached to the page border

* Does not change position as the page rises and falls

* When the mouse passes over, detailed information will pop up. When leaving, the original state will be restored

In this way, we can roughly think of several functions that may be used: absolute positioning of postion; leaving after the mouse passes Monitoring and methods; these will definitely be used, but besides these, what else are used, and how are they implemented?

1. To realize the interface status of all displays

First write the html code

Copy the code The code is as follows:

Tips

Share to

Then css style encoding

Copy the code The code is as follows:

*{margin: 0;padding: 0;}
#shareLeft{position: fixed;background-color: yellow;top: 50px;width: 300px; height: 600px;right: 0px;}
#mainMsg{color: #fff;position: absolute;cursor: pointer;text-align: center;background-color: red;top: 60px;width: 100px;height: 400px;padding: 20px 0 0 10px;margin-left: -100px;border-radius:50px 0 0 50px; }
.list{float: right;background-color: #fff;width: 280px;height: 580px ;margin: 10px 10px 10px 10px;}

Let’s analyze the key points here: a. postion: fixed, this fixed position is very good; b. right: 0px, this is specific The application will be explained in detail later, but this is also crucial; 3. The margin-left of #mainMsg: -100px, this place is also very important, so let’s take a look at the effect

Haha, this is the biggest one this year Let’s have a prank on the pop-up box. Let’s continue to talk about the pop-up effect using js

2. Hide the detailed part and leak the prompt part

This is relatively simple. To modify it, just add Just change the right value of shareLeft, right=-300px, which is the width of the div

3. Use js to achieve the pop-up effect

This is not the first time we have used this timer effect , we have used it before when we implemented the typewriter effect in js. Here we just changed the timing object

Copy code The code is as follows:

I will introduce it in a special article. Let’s use it like this here. Just know the meaning.

I’ll talk about this after I’ve figured it out. Now the effect is achieved, you can try it too.