JavaScript鼠标悬浮展开侧栏导航
分类：实例代码
本章节分享一段代码实例，它实现了鼠标悬浮能够展开侧栏导航的效果。
代码来源于论坛会员的一个问题，本站将其优化并改进了一下，原来的代码是有点问题的。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
body, ul{
margin:0;
padding:0;
}
#box{
width:150px;
height:200px;
background:#0CF;
position:absolute;
left:-150px;
}
ul li{
list-style-type:none;
}
ul li a{
display:block;
height:28px;
text-decoration:none;
}
#span {
width:20px;
height:80px;
position:absolute;
top:70px;
background:#ffc;
right:-20px;
}
</style>
<script type="text/javascript">
var timer;
function startMove(){
clearInterval(timer);
var odiv=document.getElementById("box");
timer=setInterval(function(){
if(odiv.offsetLeft>=0){
clearInterval(timer);
}
else{
odiv.style.left=odiv.offsetLeft+3+"px";
}
},30);
}
function obMove(){
clearInterval(timer);
var odiv=document.getElementById("box");
timer=setInterval(function(){
if(odiv.offsetLeft<=-150){
clearInterval(timer);
}
else{
odiv.style.left=odiv.offsetLeft-3+"px";
}
},30);
}
window.onload=function(){
document.getElementById("box").onmouseover=startMove;
document.getElementById("box").onmouseout=obMove;
}
</script>
</head>
<body>
<div id="box">
<span id="span">分享到</span>
<ul>
<li><a href="#">pipipi.net</a></li>
<li><a href="#">Sina微博</a></li>
<li><a href="#">朋友圈</a></li>
<li><a href="#">前端教程网</a></li>
<li><a href="#">QQ空间</a></li>
</ul>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.var timer,声明一个变量用来存储定时器函数的标识。
（2）.function startMove(){ },作为onmouseover事件处理函数。
（3）.clearInterval(timer)，停止上一个定时器方法的执行，如果没有此代码，侧可能出现多个定时器方法共同执行的现象。
（4）.var odiv=document.getElementById("box")，获取id属性值为box的元素对象。
（5）.timer=setInterval(function(){
if(odiv.offsetLeft>=0){
clearInterval(timer);
}
else{
odiv.style.left=odiv.offsetLeft+3+"px";
}
},30)，每隔30毫秒执行一次函数，当然需要判断offsetLeft属性值，关于此属性可以参阅相关阅读。
二.相关阅读:
（1）.setInterval方法可以参阅JavaScript setInterval()一章节。
（2）.offsetLeft属性参阅JavaScript offsetLeft一章节。
（3）.onmouseover事件参阅JavaScript mouseover 事件一章节。
（4）.onmouseout事件参阅JavaScript mouseout 事件一章节。