javascript实现动态侧边栏代码


Posted in Javascript onFebruary 19, 2014

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

首先是HTML 结构

<body>
<div id="div1">
<span>侧边栏</span>
</div>
</body>

然后是css的样式:

#div1{
    width:150px;
    height:200px;
    background:#999999;
    position:absolute;
    left:-150px;}
span{
    width:20px;
    height:70px;
    line-height:23px;
    background:#09C;
    position:absolute;
    right:-20px;
    top:70px;}

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

javascript实现动态侧边栏代码

当鼠标移入以后如图:

javascript实现动态侧边栏代码

下面是完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1{
    width:150px;
    height:200px;
    background:#999999;
    position:absolute;
    left:-150px;}
span{
    width:20px;
    height:70px;
    line-height:23px;
    background:#09C;
    position:absolute;
    right:-20px;
    top:70px;}
</style>
<script>
window.onload=function(){
    var odiv=document.getElementById('div1');
   odiv.onmouseover=function ()
   {        startmove(0,10);//第一个参数为div   left属性的目标值   第二个为 每次移动多少像素
       }
  odiv.onmouseout=function ()
  {
     startmove(-150,-10);
      }
    }
    var timer=null;
function startmove(target,speed)
{
    var odiv=document.getElementById('div1');
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="div1">
<span>侧边栏</span>
</div>
</body>
</html>
Javascript 相关文章推荐
javascript显示选择目录对话框的代码
Nov 10 Javascript
JavaScript 对象、函数和继承
Jul 07 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 #Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 #Javascript
document.forms[].submit()使用介绍
Feb 19 #Javascript
页面按钮禁用与解除禁用的方法
Feb 19 #Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 #Javascript
悬浮数字的实现案例
Feb 19 #Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 #Javascript
You might like
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
第四章 php数学运算
2011/12/30 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
php中this关键字用法分析
2016/12/07 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
jquery获取radio值实例
2014/10/16 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
python正则分组的应用
2013/11/10 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
村委会贫困证明
2014/01/14 职场文书
大学生军训感想
2014/02/16 职场文书
体育教学随笔感言
2014/02/24 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
行政处罚事先告知书
2015/07/01 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python
python创建字典及相关管理操作
2022/04/13 Python