Javascript implements dynamic sidebar code_javascript skills

In general, it is completed by using the two times of mouse hover onmouseover and mouse removal onmouseout.

First is the HTML structure

Copy code The code is as follows:

Sidebar

Then the css style:

Copy code The code is as follows:

#div1{
width:150px;
height:200px;
background:#999999;
position:absolute;
left:-150px;}
span{
width:20px;
height:70px;
line-height:23px;
background:#09C;
position:absolute;
right:-20px;
top:70px;}

The default style sidebar is hidden as shown in the figure:

When the mouse is moved in, it will look like this:

The following is the complete code:

Copy the code The code is as follows:

< ;script>
window.onload=function(){
var odiv=document.getElementById('div1');
odiv.onmouseover=function ()
{

startmove (0,10);//The first parameter is the target value of the left attribute of the div The second is how many pixels to move each time

}
odiv.onmouseout=function ()
{
startmove(-150,-10);
}
}

var timer=null;
function startmove(target,speed)
{

var odiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function (){

if(odiv.offsetLeft==target)
{
clearInterval(timer);
}
else
odiv.style.left=odiv.offsetLeft speed 'px';
             }

                                                                  )

}

Sidebar