首页 > 代码库 > js实现的侧边栏展开收缩效果
js实现的侧边栏展开收缩效果
<!DOCTYPE html><html><head><meta charset=" utf-8"><title>侧边栏展开收缩</title><style type="text/css">#thediv{ width:150px; height:200px; background:#999999; position:absolute; left:-150px;//div初始位置}span{ width:20px; height:100px; line-height:23px; background:#09C; position:absolute; right:-20px; top:70px;}</style><script>window.onload=function(){ var odiv=document.getElementById(‘thediv‘); odiv.onmouseover=function (){startmove(0,10);} odiv.onmouseout=function (){startmove(-150,-10);}}var timer=null;function startmove(target,speed){ var odiv=document.getElementById(‘thediv‘); 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="thediv"><span>侧边栏展开收缩</span></div></body></html>
以上代码实现了我们的要求，鼠标悬浮于侧边栏可以实现展开，离开实现收缩功能，下面介绍一下实现过程。
一.代码注释:
1.window.onload=function(){}，文档结构内容完全加载完毕再去执行函数中的代码。
2.var odiv=document.getElementById(‘thediv‘)，获取指定元素对象。
3.odiv.onmouseover=function (){startmove(0,10);}，为odiv对象注册onmouseover事件处理函数。
4.odiv.onmouseout=function (){startmove(-150,-10);}，为odiv对象注册onmouseout事件处理函数。
5.var timer=null，声明一个timer作为定时器函数的标识。
6.function startmove(target,speed){}此函数是展开和折叠的核心函数，第一个参数是left的目标值，speed是速度。
7. var odiv=document.getElementById(‘thediv‘)，获取元素对象。
8.clearInterval(timer)，停止前一个定时器函数的执行，可以防止多个定时器函数同时执行造成干扰。
9.timer=setInterval(function (){},30)，每隔30毫秒执行一次函数。
10.if(odiv.offsetLeft==target){clearInterval(timer);}，如果div元素距离body左边缘等于规定的尺寸，就停止定时器函数。
11.else{odiv.style.left=odiv.offsetLeft+speed+‘px‘;}，否则继续设置left属性值。
二.相关阅读:
1.onmouseover事件可以参阅javascript的onmouseover事件一章节。
2.onmouseout事件可以参阅javascript的onmouseout事件详解一章节。
3.clearInterval()函数可以参阅window对象的clearInterval()方法一章节。
4.setInterval()函数可以参阅setInterval()函数用法详解一章节。
5.offsetLeft属性可以参阅js的offsetTop好offsetLeft属性用法详解一章节。
js实现的侧边栏展开收缩效果