你的位置:首页 > Java教程

[Java教程]js实现的侧边栏展开收缩效果


js实现的侧边栏展开收缩效果:
在很多应用中,尤其是客服系统一般具有这样的效果,那就是默认状态下,会折叠在网页的一侧,当鼠标悬浮的时候会展开,下面就通过代码实例,介绍一下如何使用原生javascript实现此功能。
更多的javascript特效可以浏览特效代码下载版块。
代码如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#thediv{ width:150px; height:200px; background:#999999; position:absolute; left:-150px;}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属性用法详解一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12246

更多内容可以参阅:http://www.softwhy.com/javascript/