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 文件夹选择框的两种解决方案
Jul 01 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 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读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
Python实现全角半角转换的方法
2014/08/18 Python
Python的面向对象思想分析
2015/01/14 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
2014年行政工作总结
2014/11/19 职场文书
文明礼仪主题班会
2015/08/13 职场文书
校园安全学习心得体会
2016/01/18 职场文书
Golang map映射的用法
2022/04/22 Golang