原文地址：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. haproxy redirect location和redirect prefix

    <pre name="code" class="html">redirect location <loc> [code <code ...

  2. 用ATL开发和部署ActiveX网页控件

    用ATL开发和部署ActiveX网页控件 摘 要 ActiveX插件技术广泛的运用于B/S系统中,本文通过一个项目实例,详细介绍用ATL开发和部署ActiveX网页控件的过程.学习使用ActiveX让 ...

  3. Qt移动版优化后台云服务、支持跨平台开发

    http://mp.weixin.qq.com/mp/appmsg/show?__biz=MjM5MDE0Mjc4MA==&appmsgid=10000461&itemidx=2&am ...

  4. IIS部署asp.net报404错误

    1).所建网站->(右键)权限->"ASP.NET计算机帐户"是否已添加.     2).所建网站->(右键)属性->ASP.NET选项卡->版本是否 ...

  5. Mac必备软件推荐

    阅读原文http://littlewhite.us/archives/245 随着IOS的流行.Mac电脑也越来越多的进入人们的视野,和iPhone系列一样,苹果的Mac产品线也是软硬件完美结合.有着 ...

  6. windows7 iis安装与配置

    方法/步骤   一． Windows 7环境下的安装配置 打开控制面板——程序和功能   点击左侧“打开或关闭Windows功能”,弹出Windows功能 对话框.   在Windows功能对话框中进 ...

  7. VirtualBox，Kernel driver not installed (rc=-1908)

    http://hi.baidu.com/spt_form/item/316d6207b47b8ee03499020a VirtualBox,Kernel driver not installed (r ...

  8. POJ 3176：Cow Bowling

    Cow Bowling Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13464   Accepted: 8897 Desc ...

  9. codeforces 592B The Monster and the Squirrel

    题目链接:http://codeforces.com/contest/592/problem/B 题目分类:数学,找规律 题目分析:重要的是画图找规律   代码: #include<bits/s ...

  10. 程序缩小到托盘后系统就无法关机（解决方案）——处理WM_QUERYENDSESSION消息，并把它标识为处理过了

    程序缩小到托盘后系统就无法关机(解决方案)                       老帅    程序最小化到托盘后,会出现系统无法关闭的问题,常见于WinXP系统中,这里提供一个解决方案!一.解决 ...