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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
Vue Element UI自定义描述列表组件
May 18 Vue.js
返回上一页并自动刷新的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中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
python正则分组的应用
2013/11/10 Python
Python入门篇之数字
2014/10/20 Python
在Python中使用列表生成式的教程
2015/04/27 Python
Python模拟百度登录实例详解
2016/01/20 Python
python取代netcat过程分析
2018/02/10 Python
Python将图片转换为字符画的方法
2020/06/16 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
pandas计数 value_counts()的使用
2019/06/24 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
对于Python深浅拷贝的理解
2019/07/29 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
python绘制随机网络图形示例
2019/11/21 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
房地产融资计划书
2014/01/10 职场文书
仓管员岗位责任制
2014/02/19 职场文书
组工干部对照检查材料
2014/08/25 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python