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

<!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.onmousedown = function()
    {
        if(odiv.offsetLeft == 0)
        {
            startmove(-150, -10);
        }
        else
        {
            startmove(0, 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实现的侧边栏展开收缩效果的更多相关文章

  1. 原生态js单个点击展开收缩

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 点击UITableView的cell展开收缩

    在项目中有个需求,点击表视图的单元格展开,再点击另外一个单元格或者本身又收缩,经过一段时间尝试,实现了该功能,现在记录分享总结下.   首先要理解UITableView代理方法调用的先后顺序.   当 ...

  3. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  4. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js之展开收缩菜单，用到window.onload ,onclick,

    目标效果:点击标签1,如果列表标签的style的display是block,改成none,否则改成block,来达到展开收缩菜单效果 一.准备阶段 html文件 <!DOCTYPE html&g ...

  6. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  7. js 实现内容的展开和收缩

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. HTML5每日一练之details展开收缩标签的应用

    details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...

  9. jQuery展开收缩2

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

随机推荐

  1. Android开发之导入错误

    在导入Git库中更新下来的project的时候,自己手动的加入libs,assets等依赖库进去.可是导入project总是会莫名奇异的出现故障,特别是对Android系统库依赖的报错之类的. 解决方 ...

  2. C#判断文件是否正在被使用

    生成文件的时候,如果该文件夹下的同名文件被打开(或者被使用),如果这时再生成一个同名文件,则会提示文件正在被占用. 解决方法有两个,一个是保存的文件名改成该文件夹下不存在的(随机数之类的XXOO都行, ...

  3. boost::asio网络传输错误码的一些实验结果（recv error_code）

    错误码很重要,可以由此判断网络连接到底发生了神马事情,从而驱动高层逻辑的行为.只有笼统的错误码判断的网络层是不够规范的,鄙人觉得有些错误码还是需要在网络层就区分开的,特此记录一些当前实验的错误码以及发 ...

  4. Fedora Linux 下安装配置C开发环境Code::Blocks

    一.提前的话要说C语言和Linux的关系大家应该都不会陌生,Linux系统内核就是用C语言开发的,所以所有的Linux系统下面 都会有C的编译调试工具,不过这些工具都是命令式的,正式开发的话会很不方便 ...

  5. DotNetBar.Bar控制Y顺序控制方向

    DotNetBar.Bar控件Y方向上的顺序控制 老帅       控件DevComponents.DotNetBar.Bar是能够有多种用途的.能够作为容器,也能够作为工具条,不管做什么,在Y方向上 ...

  6. Prime Path （poj 3126 bfs）

    Language: Default Prime Path Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 11703   Ac ...

  7. BUG: scheduling while atomic: events/0/4/总结

    对于Linux内核来说,Oops就意外着内核出了异常,此时会将产生异常时CPU的状态,出错的指令地址.数据地址及其他寄存器,函数调用的顺序甚至是栈里面的内容都打印出来,然后根据异常的严重程度来决定下一 ...

  8. VI01增强问题

    函数'SD_SCD_ITEM_PRICING_DATA_GET',其实在增强中和交货相关的数据在这个函数中都可以取到,没有必要再从LIKP.LIPS等等中重新取数. include程序RV64A631 ...

  9. Linux下同时运行不同版本的qt程序

    因项目需要,可能有不同版本的qt程序要运行到同一台机器上,本次实验是qt4.8.5和qt5.3.1开发的程序同时运行在同一台机器上,此机器可以不按照qt的任何版本,当然,两个版本开发的qt与机器的位数 ...

  10. 配置QtCreator+CDB远程调试环境（要设置_NT_SYMBOL_PATH和QT_PLUGIN_PATH和Path）

    相关环境信息:开发机Win7 x64.远程机器WinXP.调试器是CDB.Qt版本5.2.1 一.部署远程机器环境 我这里用的是虚拟机(Windows XP),根据你要调试的程序选择安装不同架构的Wi ...