Javascript page side popup ideas and implementation code

To the weekend, tomorrow should summarize, feel learned some things, and feel did not learn much, specific tomorrow to analyze it, first look at today to analyze the problem.

This picture is more familiar than most:

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/20140521094225.jpg? 201442194325 "> -- -- -- -- -- -- < img SRC =" border = 0 / / files.jb51.net/file_images/article/201405/20140521094527.jpg? 201442194549 ">

Today we are going to analyze the production of the first to introduce the characteristics of this pop-up box:

* always attach to the page border

* does not change position as the page goes up or down

* details will pop up when the mouse is over, and the original state will be restored when it leaves

In this way, we can think of several possible functions: the absolute positioning of postion; Mouse over the left monitor and method; These will certainly be used, but what else is used, and how is it actually implemented?

1, to achieve all the display of the interface state

Start by writing the HTML code

 
<span style="font-size:12px;"> <div id="shareLeft" class="shareLeft"> 
<div class="list"> 
<p><a href="#" title=" prompt "> prompt </a></p> 
</div> 
<p class="msg" id="mainMsg" onmouseover="showTip()"> 
 Share the  
</p> 
</div></span> 

Then there's the CSS style coding

 
<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> 

A. postion b. fix c. postion d. postion B, right: 0px. We'll talk about this in more detail later, but it's also crucial here. 3. Margin-left: -100px of #mainMsg, which is also very important, let's see the effect
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/20140521094611.jpg? 201442194629 ">  
Haha this is the biggest popup of the year, it's a spoof, we continue to talk about js popup effect

2. Hide the detailed part and reveal the part

This is relatively simple to modify, just change the shareLeft right value, right=-300px, which is the width of div

3, js to achieve the pop-up effect

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

 
<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 note in this code are: offsetWidth,. Style.

We'll talk about this when we're done. Now we're done. You can try it.