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 跨域访问解决方案
Feb 14 Javascript
jQuery 遍历json数组的实现代码
Sep 22 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python判断Abundant Number的方法
2015/06/15 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
古驰英国官网:GUCCI英国
2020/03/07 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
会计大学生职业生涯规划书范文
2014/01/13 职场文书
婚前财产公证书
2014/04/10 职场文书
挂靠协议书范本
2014/04/22 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
社会实践活动总结
2015/02/05 职场文书
vue实现拖拽交换位置
2022/04/07 Vue.js