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 相关文章推荐
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
复制js对象方法(详解)
Jul 08 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
php获取bing每日壁纸示例分享
2014/02/25 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
Angular路由简单学习
2016/12/26 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
中间件的定义
2016/08/09 面试题
通信工程专业毕业生推荐信
2013/12/25 职场文书
面试后的英文感谢信
2014/02/01 职场文书
高中军训感言800字
2014/03/05 职场文书
房地产端午节活动方案
2014/08/24 职场文书
工作检讨书怎么写
2014/10/10 职场文书
健康状况证明模板
2014/10/23 职场文书
客服专员岗位职责
2015/02/10 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
严以用权学习心得体会
2016/01/12 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
HTTP中的Content-type详解
2022/01/18 HTML / CSS