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

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

0 2016-02-12 16:00:09

js实现的侧边栏展开收缩效果:

在很多应用中，尤其是客服系统一般具有这样的效果，那就是默认状态下，会折叠在网页的一侧，当鼠标悬浮的时候会展开，下面就通过代码实例，介绍一下如何使用原生javascript实现此功能。

更多的javascript特效可以浏览特效代码下载版块。

代码如下:

蚂蚁部落

蚂蚁部落

以上代码实现了我们的要求，鼠标悬浮于侧边栏可以实现展开，离开实现收缩功能，下面介绍一下实现过程。

一.代码注释:

1.window.οnlοad=function(){}，文档结构内容完全加载完毕再去执行函数中的代码。

2.var odiv=document.getElementById('thediv')，获取指定元素对象。

3.odiv.οnmοuseοver=function (){startmove(0,10);}，为odiv对象注册onmouseover事件处理函数。

4.odiv.οnmοuseοut=function (){startmove(-150,-10);}，为odiv对象注册onmouseout事件处理函数。

5.var timer=null，声明一个timer作为定时器函数的标识。

6.function startmove(target,speed){}此函数是展开和折叠的核心函数，第一个参数是left的目标值，speed是速度。

7. var odiv=document.getElement