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 本文主要 ...
随机推荐
- Wcf 双工通信的应用
概述 双工(Duplex)模式的消息交换方式体现在消息交换过程中,参与的双方均可以向对方发送消息.基于双工MEP消息交换可以看成是多个基本模式下(比如请求-回复模式和单项模式)消息交换的组合.双工ME ...
- Windows内核 WDM驱动程序的基本结构和实例
WDM驱动的基本结构: WDM驱动模型是建立在NT式驱动程序模型基础之上的.对于WDM驱动程序来说,一般都是基于分层的,即完成一个设备的操作,至少要由两个驱动设备共同完成. 1)物理设备对象和功能设备 ...
- Javascript中的new
直接上代码 function test () { } document.write(typeof test() + "<br />") document.write(t ...
- 给RecyclerView实现的GridView加上HeaderView和FooterView
给RecyclerView设置布局管理器 GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 3); 写适配器,添加子项 ...
- CSS成长之路----知识点篇
一,ul--li列表水平排列,切居中对齐 主要是利用Li标签中的display属性.设置为display:inline,使li纵向排布,且能够使用text-align:center;使其居中显示 HT ...
- jQuery获取一般处理程序(ashx)的JSON数据
昨天有在开发的软件生产线生产流程,RFID扫描IC卡的数据,当中有用到jQuery获取一般处理程序(ashx)的JSON数据.今有把它写成一个小例子,望需要的网友能参考. 在网站中,创建一个一般应用程 ...
- python3中urllib2的问题
import urllib from urllib import request a = urllib.request.Request(url) b = urllib.request.urlopen( ...
- PHP---------去除数组里面值为空或者为空字符串的元素
array_filter(array('a'=>'','',null,'b'=>3),function($val){ if($val===''||$val===null){ ...
- Communication 交流
1:请不要立马抗拒别人的观点,先沉默下来思考,在做出回应. 2:在与别人交流的时候,请尽量先让别人同意你的观点,找到共同点,让别人回答 "是";
- 。。。contentType与pageEncoding的区别。。。
今天,开始换了一个新的开发工具IDEA,目前还不熟悉,新建了一个简单的Web项目,用到了Servlet,out.print("大家好!");然后就输出乱码了,用了response. ...