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 本文主要 ...
随机推荐
- 淘宝天猫网站停止支持IE6、IE7浏览器，你还在用xp吗？
2016年4月14日,是科比正式告别篮球的最后一场球赛.大家都在忙着各种纪念和怀念着看科比打球的青葱岁月.不过已经完美谢幕.而我们今天要说的是微软的IE6.IE7浏览器.淘宝网和天猫商城正式停止支持I ...
- 验证一个字符串是否由数字组成（Java）
public class StringDemo{ public static void main(String args[]){ String str ="12343264sd6223&qu ...
- php安装memcache注意事项
有没有谁遇到过这样的问题:在php.ini里面 extension=php_memcache.dll添加了memcache扩展,在ext目录里也添加了php_memcache.dll文件.但用phpi ...
- Altium Designer的PCB定位槽制作
Altium Designer的PCB定位槽制作 1.使用焊盘代替. 操作很简单,但孔壁有镀铜. 2.定位孔制作. 先在Keep-Out layer放置一个需要大小的圆, 然后按快捷键T-V-T,这时 ...
- connect to https://dl-ssl.google.com refused
这个可能是网络问题,国内连google服务器经常连不上. 尝试用下面办法试下: 1.上图SDK Manager 的 Tools ->Options打开SDK Manager的Settings, ...
- Web前端工程师成长之路
一.何为Web前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/D ...
- 白话学习MVC(九)View的呈现一
一.概述 本节来看一下ASP.NET MVC[View的呈现]的内容,View的呈现是在Action执行之后进行,Action的执行生成一个ActionResult,[View的呈现]的功能就是:通过 ...
- mesos+marathon+zookeeper的docker管理集群亲手搭建实例(环境Centos6.8)
资源:3台centos6.8虚拟机 4cpu 8G内存 ip 10.19.54.111-113 1台centos6.8虚拟机2cpu 8G ip 10.19.53.55 1.System Requir ...
- SQL调优
# 问题的提出 在应用系统开发初期,由于开发数据库数据比较少,对于查询SQL语句,复杂视图的的编写等体会不出SQL语句各种写法的性能优劣,但是如果将应用 系统提交实际应用后,随着数据库中数据的增加,系 ...
- php截取字符串
1.substr(源字符串,其实位置[,长度])-截取字符串返回部分字符串 <?php $str ="phpddt.com"; echo substr($str, 2); / ...