原文地址：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. python实现PKCS5Padding

    python实现PKCS5Padding     python实现PKCS5Padding    2008-09-21     请参考    ssl-3-padding-mode    php的加密函 ...

  2. doT js模板入门

    doT.js github地址: doT.js 官方站点 实例1:简单 <!DOCTYPE html> <html lang="en"> <head& ...

  3. [Machine Learning (Andrew NG courses)]IV.Linear Regression with Multiple Variables

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenFoXzE5OTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  4. Linux 高性能server编程——高级I/O函数

    重定向dup和dup2函数 #include <unistd.h> int dup(int file_descriptor); int dup2(int file_descriptor_o ...

  5. css怎样使顶端悬浮导航栏不遮住下面一层页面内容

    在两个层之间加这个<span class="blank" style="height:20px;"></span>,其中高度可以自己设置 ...

  6. qt宽字符串中文乱码（codec->toUnicode值得学习）

    乱码原因: QT使用的是utf-8 简体中文版的windows操作系统及其应用软件默认都是ANSI/GBK编码.而且这里应该是宽字符串. 多字节ANISGB 宽字符UNICODE 多字节显示标准字符的 ...

  7. linux下安装node.js

    1.下载 wget http://nodejs.org/dist/v0.10.32/node-v0.10.32-linux-x64.tar.gz 2.解压 tar -xvf node-v0.10.32 ...

  8. html中的rowspan和colspan

    摘自w3school(http://www.w3school.com.cn/tags/att_td_colspan.asp)colspan 属性规定单元格可横跨的列数.<table border ...

  9. 后缀数组--可重叠的K次最长重复子串(POJ3261)

    题目:Milk Patterns #include <stdio.h> #include <string.h> #define N 1000010 int wa[N],wb[N ...

  10. Apache Lucene

    1.Lucene  -全文搜索引擎 Apache Lucene 是一个基于Java的全文搜索引擎,利用它能够轻易的为Java软件添�全文搜索引擎的功能. Lucene最重要的工作是替文件的每个字索引, ...