javascript实现动态侧边栏
总的来说就是利用 鼠标悬停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;}
默认的样式 侧边栏是隐藏起来的如图：
当鼠标移入以后如图：
下面是完整代码：
<!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 DOM动态创建（声明）Object元素
http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...
- 每天一个JavaScript实例-动态省份选择城市
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 理解Javascript的动态语言特性
原文:理解Javascript的动态语言特性 理解Javascript的动态语言特性 Javascript是一种解释性语言,而并非编译性,它不能编译成二进制文件. 理解动态执行与闭包的概念 动态执行: ...
- 第一百一十八节，JavaScript，动态加载脚本和样式
JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. ...
- JavaScript 拥有动态类型
字符串.数字.布尔.数组.对象.Null.Undefined JavaScript 拥有动态类型 JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: 实例 var x // x ...
- canvas ：原生javascript编写动态时钟
canvas :原生javascript编写动态时钟 此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...
- JavaScript 创建动态表格
JavaScript 创建动态表格 版权声明:未经授权,严禁转载! 案例代码 <div id="data"></div> <script> va ...
- JavaScript的动态特性(通过eval,call,apply和bind来体现)
JavaScript的动态特性(通过eval,call,apply和bind来体现) JavaScript是一种基于面向对象的.函数式的.动态的编程语言.现在发展到已经可以用在浏览器和服务器端了. 这 ...
- Arcgis javascript api 动态图层自图层可见性设置
Arcgis javascript api 动态图层自图层可见性设置 子图层管理 rest服务 sublayers sublayer ArcGISDynamicMapServiceLayer 本文主要 ...
随机推荐
- 【iCore3 双核心板】例程十三：SDIO实验——读取SD卡信息
实验指导书及代码包下载: http://pan.baidu.com/s/1hqM787E iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- Android SDK路径不能含有空格
错误, android sdk location shoud not contain whitespace,as this can cause problems with thte ndk tools
- Day3~Day7(2016/1/23~2016/1/27)
活动的生命周期:onCreate();onStart();onResume();onPause();onStop();onDestroy();onRestart(); 活动的启动模式:standard ...
- SQL基础巩固1
直接开门见山------F4 1.查询 对指定的数据表或是视图进行检索查询,找出符合查询条件功能,具体包括以下SQL语法如下所示,其中[]为可选项 Select<列名> From<表 ...
- Extjs 表格横坐标显示问题
在项目中显示chart时,当横坐标的标签名称过长时,extjs会自动隐藏部分的标签. 我想,如果能让标签斜着,或者纵向显示的话,就能够节省x轴上的长度. 经过在网上查找,解决方案如下. //在表格的a ...
- html5新增语义标签
1.header <header> 标签定义文档的页眉(介绍信息). 2.nav <nav> 标签定义导航链接的部分. 3.article <article> 标签 ...
- Cross-site Scripting (XSS) 阅读笔记
本文源自 https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29 通过阅读和翻译,并按照自己的理解,整理成如下文档. 概述 XSS ...
- Access项目文件的版本控制
简单记录一下使用MS Access SVN(以下简称AccessSVN)的步骤吧. AccessSVN在http://accesssvn.codeplex.com/,该产品的目的是:Access SV ...
- 湖大OJ-实验C----NFA转换为DFA
实验C----NFA转换为DFA Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit us ...
- Spring+Mybatis+Maven+MySql搭建实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要讲了如何使用Maven来搭建Spring+Mybatis+MySql的的搭建实例 ...