In general, the use of mouse hover onmouseover and mouse to remove onmouseout These two time to complete.
The first is the HTML structure
Copy Code code as follows:
<body>
<div id= "Div1" >
<span> Sidebar </span>
</div>
</body>
Then the style of the CSS:
Copy Code code 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 pictured:
When the mouse moves into the following figure:
Here's the complete code:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
#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;}
</style>
<script>
Window.onload=function () {
var Odiv=document.getelementbyid (' Div1 ');
Odiv.onmouseover=function ()
{
Startmove (0,10); The first parameter is the target value of the div left property and 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 ';
}
},30)
}
</script>
<body>
<div id= "Div1" >
<span> Sidebar </span>
</div>
</body>
