Javascript implements dynamic sidebar code
- 2020-03-30 01:47:07
- OfStack
It's all about hovering over the mouse. And The mouse removes the onmouseout two times to complete.
The first is the HTML structure
<body>
<div id="div1">
<span> The sidebar </span>
</div>
</body>
Then the CSS style:
#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 below:
< img border = 0 SRC = "/ / files.jb51.net/file_images/article/201402/2014219144244387.png" >
When the mouse moves in, it is shown as follows:
< img border = 0 SRC = "/ / files.jb51.net/file_images/article/201402/2014219144354688.png" >
Here's the complete code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Headless 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 div&cake; The target value of the left property & PI; The second is how many pixels are moved at a 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>
</head>
<body>
<div id="div1">
<span> The sidebar </span>
</div>
</body>
</html>