To the weekend, tomorrow should be summed up, feeling learned something, and feel not to learn how many things, concrete tomorrow to analyze it, first to look at today to analyze the problem.
This picture is familiar to us all:
————————————
Today we will analyze the production, first to introduce the characteristics of this pop-up box:
* Always attached to the page border
* Do not change position as the page goes up and down
* When the mouse passes, the details will pop up, and when you leave, restore the original state
So we can probably think of a few possible functions: the absolute positioning of the postion, the mouse after the departure of the monitoring and methods; These are certain to be used, but, in addition to these are also used, what is the realization of it?
1, to achieve the full display of the interface state
Write the HTML code first
Copy Code code as follows:
<span style= "FONT-SIZE:12PX;" > <div id= "shareleft" class= "Shareleft" >
<div class= "List" >
<p><a href= "#" title= "Tips" > Tips </a></p>
</div>
<p class= "msg" id= "mainmsg" onmouseover= "Showtip ()" >
Share to
</p>
</div></span>
And then the CSS style encoding
Copy Code code 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;p osition: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>
To analyze the main points here: A, postion:fixed this fixed position is very good; B, right:0px, this specific application will be detailed, but here is also key; 3, #mainMsg的margin-left:-100px, this place is also very important, So let's look at the effect.
Haha this is the biggest pop-up box this year, a spoof, we continue to say JS implementation pop-up effect
2, the detailed part of the hidden, hint part of the leakage outside
This is relatively simple, modified, just the right value of the shareleft can be changed, right=-300px, that is, the width of the div
3, JS to achieve the pop-up effect
The effect of this timer is not the first time we use, in JS to achieve the effect of typewriters, we have applied, here we just changed the timing of the object only
Copy Code code 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>
This code needs to pay attention to the most points are: offsetwidth, style.right, etc., this is not to say, there will be a special introduction, here to use it first, know the meaning on the line.
This wait to get through again, now the effect is reached, you also come to try it.
