原文地址：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. 【ASP.NET Web API教程】3 Web API客户端

    原文:[ASP.NET Web API教程]3 Web API客户端 Chapter 3: Web API Clients 第3章 Web API客户端 本文引自:http://www.asp.net ...

  2. asp.net ajax检查用户名是否存在代码

    原文  asp.net ajax检查用户名是否存在代码 用户注册时,我们经常需要检查用户名是否存在,本文就是实现无刷新验证用户名 打开开发环境VS 2005,新建项目(或打开现有项目),新建一个Web ...

  3. JavaScript快速入门（一）——JavaScript概览

    JavaScript是什么? JavaScript的诞生 在1995年前后,当时世界上的主流带宽为28.8Kbps,现在世界平均下载带宽为21.9Mbps(数据来源于http://www.netind ...

  4. Linux开发环境的搭建和使用——Linux 常用的命令使用

    概要 视或电影中看到过类似的场景,黑客面对一个黑色的屏幕,上面飘着密密麻麻的字符,梆梆一顿敲,就完毕了窃取资料的任务. Linux 刚出世时没有什么图形界面.全部的操作全靠命令完毕.就如同电视里的黑客 ...

  5. Net线程安全集合

    在看Supersocket源码的时候发现很多地方都用到了我们不是很常用的线程安全集合,这些都是由net优化后的线程安全集合因此 应该比我们常规lock来效率好一些 比如说: 1 CurrentStac ...

  6. OCA读书笔记(6) - 配置Oracle网络环境

    6.Configuring the Oracle Network Environment su - grid装grid时自动创建了监听netca--创建新的监听 vi $ORACLE_HOME/net ...

  7. hdu1392 Surround the Trees 凸包

    第一次做凸包,这道题要特殊考虑下,n=2时的情况,要除以二才行. 我是从最左边的点出发,每次取斜率最大的点,一直到最右边的点. 然后从最左边的点出发,每次取斜率最低的点,一直到最右边的点. #incl ...

  8. Swift - UIColor使用自定义的RGB配色

    1,比如rgb 色值为55. 186 .89 那么给UIColor设置里面要除以255 1 UIColor(red: 55/255, green: 186/255, blue: 89/255, alp ...

  9. Delphi TStream 详细介绍

    Delphi TStream 详细介绍Stream对象,又称流式对象,是TStream.THandleStream.TFileStream.TMemoryStream.TResourceStream和 ...

  10. Infinite scroll has been called autopagerize, unpaginate, endless pages

    http://www.infinite-scroll.com/ Infinite scroll has been called autopagerize, unpaginate, endless pa ...