原文地址：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. POJ 3481 &amp; HDU 1908 Double Queue (map运用)

    题目链接: PKU:http://poj.org/problem?id=3481 HDU:http://acm.hdu.edu.cn/showproblem.php?pid=1908 Descript ...

  2. Servlet的学习之ServletContext（1）

    本篇来介绍Servlet中非常重要的对象,如ServletConfig类和ServletContext类,尤其是ServletContext类中的一些方法,本篇先讲述一部分,在下一篇中继续补充. 在对 ...

  3. POJ 1466 最大独立集入门

    题意:n个学生,给你每个学生浪漫的学生学号(男女之间浪漫),问你找出一个最大的集合保证集合内的任意两个学生之间没有相互浪漫关系,输出最大集合的人数. 注意:这里的浪漫边是双向的,如果1对2浪漫, 那么 ...

  4. Lucene之删除索引

    1.前言 之前的博客<Lucene全文检索之HelloWorld>已经简单介绍了Lucene的索引生成和检索.本文着重介绍Lucene的索引删除. 2.应用场景: 索引建立完成后,因为有些 ...

  5. uva 11732 - strcmp() Anyone? 不错的Trie题

    题解:http://blog.csdn.net/u013480600/article/details/23122503 我的代码一直TLE,,,看了人家的之后,认为1.链式前向星比較好,2.*dept ...

  6. POJ1273_Drainage Ditches(网络流)

    Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 54887   Accepted: 2091 ...

  7. Swift编程语言学习3.1排列

    Swift 语言提供经典的数组和字典两种集合类型来存储集合数据.数组用来按顺序存储同样类型的数据.字典尽管无序存储同样类型数据值可是须要由独有的标识符引用和寻址(就是键值对). Swift 语言里的数 ...

  8. Linux通配符摘要

    参考<鸟哥linux私房菜> * - 通配符,代表随机字符(0对于许多) ? - 通配符,它代表一个字符 # - 凝视 / - 跳转符号,将特殊字符或通配符还原成一般符号 | - 分隔两个 ...

  9. js中静态函数与变量

    一 私有变量和函数 js中没有概念上的私有,公有也没有静态和非静态相关概念,有的只能是通过作用于来模仿 函数的块级作用域使得函数内部成员可以不被外部所访问,比如我们使用块级作用于定义一个类 //定义一 ...

  10. MFC－消息分派

    前言 由于工作需要,这几天学了一点MFC,在AFX里看到很多熟悉的东西,如类型信息,序列化,窗口封装和消息分派.几乎每个界面库都必须提供这些基础服务,但提供的手法却千差万别.MFC大量地借用了宏,映射 ...