It’s the weekend, it’s time to summarize tomorrow. I feel like I have learned some things, but I feel like I haven’t learned much. Let’s analyze it tomorrow. Let’s take a look at the issues I want to analyze today.
Everyone is familiar with this picture:
―――――――――――――――
Today we will analyze and create it. Let’s first introduce the characteristics of this pop-up box:
* Always attached to the page border
* Do not change position as the page rises and falls
* When the mouse passes by, detailed information will pop up, and when it leaves, it will return to its original state.
In this way, we can roughly think of several possible functions: absolute positioning of the post; monitoring and methods of the mouse passing by; these will definitely be used, but what are the other uses besides these, and how are they implemented?
1. Implement all displayed interface status
Write html code first
The code copy is as follows:
<span style="font-size:12px;"> <div id="shareLeft">
<div>
<p><a href="#">Tip</a></p>
</div>
<p id="mainMsg" onmouseover="showTip()">
Share to
</p>
</div></span>
Then css style encoding
The code copy is as follows:
<span style="font-size:12px;">*{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;}</span>
Let’s analyze the key points here: a. Post: fixed position is very good; b. Right: 0px, the specific application of this will be explained in detail later, but it is also very important here; 3. #mainMsg margin-left: -100px, this place is also very important, so let’s take a look at the effect
Haha, this is the biggest pop-up box of the year. Let's continue to talk about the pop-up effect of js
2. Hide the detailed part, prompting that the part is leaking outside
This is relatively simple. To modify it, just change the right value of shareLeft, right=-300px, which is the width of the div
3. js to achieve pop-up effect
This is not the first time we have used the effect of this timer. We have applied it when JS implements the typewriter effect. Here we just changed the timing object.
The code copy is as follows:
<span style="font-size:12px;"><script type="text/javascript">
var timer=null;
var count=0;
var tip=function(position,target,speed){
clearInterval(timer);
timer=setInterval(function(){
if(count>position.offsetWidth){
clearInterval(timer);
}else{
position.style.right+=window.count+"px";
window.count++;
};
}, speed);
};
function showTip(){
var position=document.getElementById("shareLeft");
tip(position, document.body.clientWidth,1000);
};
</script></span>
The most important points to pay attention to in this code are: offsetWidth, .style.right, etc. I won’t talk about this for now. I’ll introduce it specifically. Let’s use it like this first, just know the meaning.
After you understand this thoroughly, the effect will be achieved now, so you can try it too.