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 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
PHP中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
angular-cli修改端口号【angular2】
2017/04/19 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
小学教师节活动方案
2014/01/31 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
家装电话营销开场白
2015/05/29 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
Python中异常处理用法
2021/11/27 Python
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫