总的来说就是利用 鼠标悬停onmouseover   和  鼠标移除onmouseout 这两个时间来完成的。

首先是HTML 结构

  1. <body>
  2. <div id="div1">
  3. <span>侧边栏</span>
  4. </div>
  5. </body>

然后是css的样式：

  1. #div1{
  2.     width:150px;
  3.     height:200px;
  4.     background:#999999;
  5.     position:absolute;
  6.     left:-150px;}
  7. span{
  8.     width:20px;
  9.     height:70px;
  10.     line-height:23px;
  11.     background:#09C;
  12.     position:absolute;
  13.     right:-20px;
  14.     top:70px;}

默认的样式 侧边栏是隐藏起来的如图：

当鼠标移入以后如图：

下面是完整代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. #div1{
  8.     width:150px;
  9.     height:200px;
  10.     background:#999999;
  11.     position:absolute;
  12.     left:-150px;}
  13. span{
  14.     width:20px;
  15.     height:70px;
  16.     line-height:23px;
  17.     background:#09C;
  18.     position:absolute;
  19.     right:-20px;
  20.     top:70px;}
  21. </style>
  22. <script>
  23. window.onload=function(){
  24.     var odiv=document.getElementById('div1');
  25.    odiv.onmouseover=function ()
  26.    {
  27.  
  28.         startmove(0,10);//第一个参数为div   left属性的目标值   第二个为 每次移动多少像素
  29.  
  30.        }
  31.   odiv.onmouseout=function ()
  32.   {
  33.      startmove(-150,-10);
  34.       }
  35.     }
  36.  
  37.     var timer=null;
  38. function startmove(target,speed)
  39. {
  40.  
  41.     var odiv=document.getElementById('div1');
  42. clearInterval(timer);
  43.      timer=setInterval(function (){
  44.  
  45.         if(odiv.offsetLeft==target)
  46.         {
  47.             clearInterval(timer);
  48.             }
  49.             else
  50.             {
  51.         odiv.style.left=odiv.offsetLeft+speed+'px';
  52.             }
  53.  
  54.         },30)
  55.  
  56.     }
  57.  
  58. </script>
  59. </head>
  60.  
  61. <body>
  62. <div id="div1">
  63. <span>侧边栏</span>
  64. </div>
  65. </body>
  66. </html>

大家如果有什么建议可以提出来！！谢谢！！

javascript实现动态侧边栏的更多相关文章

  1. JavaScript DOM动态创建（声明）Object元素

    http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...

  2. 每天一个JavaScript实例-动态省份选择城市

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 理解Javascript的动态语言特性

    原文:理解Javascript的动态语言特性 理解Javascript的动态语言特性 Javascript是一种解释性语言,而并非编译性,它不能编译成二进制文件. 理解动态执行与闭包的概念 动态执行: ...

  4. 第一百一十八节，JavaScript，动态加载脚本和样式

    JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. ...

  5. JavaScript 拥有动态类型

    字符串.数字.布尔.数组.对象.Null.Undefined JavaScript 拥有动态类型 JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: 实例 var x // x ...

  6. canvas ：原生javascript编写动态时钟

    canvas :原生javascript编写动态时钟     此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...

  7. JavaScript 创建动态表格

    JavaScript 创建动态表格 版权声明:未经授权,严禁转载! 案例代码 <div id="data"></div> <script> va ...

  8. JavaScript的动态特性(通过eval,call,apply和bind来体现)

    JavaScript的动态特性(通过eval,call,apply和bind来体现) JavaScript是一种基于面向对象的.函数式的.动态的编程语言.现在发展到已经可以用在浏览器和服务器端了. 这 ...

  9. Arcgis javascript api 动态图层自图层可见性设置

    Arcgis javascript api 动态图层自图层可见性设置 子图层管理 rest服务 sublayers sublayer ArcGISDynamicMapServiceLayer 本文主要 ...

随机推荐

  1. Java接入图灵机器人，实现与机器人聊天

    很多人都玩过微信,其中就有与机器人聊天的功能:

  2. 一个简单驱动的makefile

    KVERS = $(shell uname -r) #Kernel modulesobj-m += hello.o build: kernel_modules kernel_modules: make ...

  3. 【iCore3 双核心板】例程二十三：LAN_HTTP实验——网页服务器

    实验指导书及代码包下载: http://pan.baidu.com/s/1getgyKr iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  4. lsof 一切皆文件

    Docs » 工具参考篇 » 3. lsof 一切皆文件 Docs » 工具参考篇 » 3. lsof 一切皆文件 Edit on GitHub 3. lsof 一切皆文件¶ lsof(list op ...

  5. JavaScript中的setTimeout和setInterval

    上一篇博文<浏览器中Javascript单线程分析>中描述了浏览器中Javascript单线程的原理. 在此基础上,这篇文章将主要介绍setTimeout/setInterval是如何模拟 ...

  6. 关于Currency类型和 TCurrencyFiled的悲剧

    这2天程序出问题, 用户结算金额经常莫名其妙的多出了小数点后几位, 不用思考 肯定是因为浮点精度不准确的问题 查了一下, 程序中的数据类型使用的是Currency, 按照数据类型的描述, 这个金额类型 ...

  7. jQuery extend 实现代码封装

    jQuery 有两种方式封装代码 $.extend 和 $.fn.extend,我们也称为封装插件 $.extend DEMO // 封装 $.extend({ say:function(option ...

  8. UINavigationBar 总结

    一.某个 ViewController 出现隐藏 NavigationBar - (void)viewWillAppear:(BOOL)animated { [super viewWillAppear ...

  9. ios每日一发--仿侧边抽屉效果

    效果图如下 代码实现以及思路下面分析: 代码创建导航控制器 Appdelegate.m中 #import "AppDelegate.h" #import "ViewCon ...

  10. Latex常用指令学习

    1:\begin{}与\end{}的用法 2:\textcolor{red}{\fangsong\zihao{2}汉字:} 3:\newpage  新的一页 4:\heiti\zihao{4}\bf{ ...