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 双核心板】例程三十三：SD_IAP_ARM实验——更新升级STM32
实验指导书及代码包下载: http://pan.baidu.com/s/1jHmvQfk iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- PHP 标准库 SPL 之数据结构栈（SplStack）简单实践
PHP 5.3.0 版本及以上的堆栈描述可以使用标准库 SPL 中的 SplStack class,SplStack 类继承双链表 ( SplDoublyLinkedList ) 实现栈. 代码: & ...
- Jquery EasyUI使用总结（一）
1,弹出Iframe,新窗口 //打开编辑页面要加载的数据 function ShowDialog(id, url, width, height, onLoadFunc) { $("#&qu ...
- python3中urllib2的问题
import urllib from urllib import request a = urllib.request.Request(url) b = urllib.request.urlopen( ...
- DataTable使用技巧总结【转】
一.DataTable简介 ()构造函数 DataTable() 不带参数初始化DataTable 类的新实例. DataTable(string tableName) 用指定的表名初始化DataTa ...
- 盒模型--padding
突然增加padding会使盒子变大,所以要按实际情况做调整. 没有写padding的时候: <style>div{ background:gray;}</style></ ...
- tapping of data 词义来源
tapping of data 在数据交互的过程 数据被 窃听到. 例如, 网站的账户被泄露, 在用户登陆过程中, 其账号被第三方偷到. tapping 含义 看看 youdao 词典解释: n. [ ...
- JAVA线程池原理详解一
线程池的优点 1.线程是稀缺资源,使用线程池可以减少创建和销毁线程的次数,每个工作线程都可以重复使用. 2.可以根据系统的承受能力,调整线程池中工作线程的数量,防止因为消耗过多内存导致服务器崩溃. 线 ...
- LaTeX插入图片方法 Inserting Images
Inserting Images Images are essential elements in most of the scientific documents. LATEX provides s ...
- IO/ACM中来自浮点数的陷阱（收集向）
OI/ACM中经常要用到小数来解决问题(概率.计算几何等),但是小数在计算机中的存储方式是浮点数而不是我们在作数学运算中的数,有精度的限制. 以下以GUN C++为准,其他语言(或编译器)也差不了多少 ...