js实现的侧边栏展开收缩效果
原文地址：http://www.softwhy.com/forum.php?mod=viewthread&tid=12246
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>侧边栏展开收缩</title>
<style type="text/css">
#thediv{
width:150px;
height:200px;
background:#999999;
position:absolute;
left:-150px;//div初始位置
}
span{
width:20px;
height:100px;
line-height:23px;
background:#09C;
position:absolute;
right:-20px;
top:70px;
}
</style>
<script>
window.onload=function(){
var odiv=document.getElementById('thediv');
odiv.onmousedown = function()
{
if(odiv.offsetLeft == 0)
{
startmove(-150, -10);
}
else
{
startmove(0, 10);
}
}
var timer=null;
function startmove(target,speed){
var odiv=document.getElementById('thediv');
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="thediv">
<span>侧边栏展开收缩</span>
</div>
</body>
</html>
以上代码实现了我们的要求，鼠标悬浮于侧边栏可以实现展开，离开实现收缩功能，下面介绍一下实现过程。
一.代码注释:
1.window.onload=function(){}，文档结构内容完全加载完毕再去执行函数中的代码。
2.var odiv=document.getElementById('thediv')，获取指定元素对象。
3.odiv.onmouseover=function (){startmove(0,10);}，为odiv对象注册onmouseover事件处理函数。
4.odiv.onmouseout=function (){startmove(-150,-10);}，为odiv对象注册onmouseout事件处理函数。
5.var timer=null，声明一个timer作为定时器函数的标识。
6.function startmove(target,speed){}此函数是展开和折叠的核心函数，第一个参数是left的目标值，speed是速度。
7. var odiv=document.getElementById('thediv')，获取元素对象。
8.clearInterval(timer)，停止前一个定时器函数的执行，可以防止多个定时器函数同时执行造成干扰。
9.timer=setInterval(function (){},30)，每隔30毫秒执行一次函数。
10.if(odiv.offsetLeft==target){clearInterval(timer);}，如果div元素距离body左边缘等于规定的尺寸，就停止定时器函数。
11.else{odiv.style.left=odiv.offsetLeft+speed+'px';}，否则继续设置left属性值。
二.相关阅读:
1.onmouseover事件可以参阅javascript的onmouseover事件一章节。
2.onmouseout事件可以参阅javascript的onmouseout事件详解一章节。
3.clearInterval()函数可以参阅window对象的clearInterval()方法一章节。
4.setInterval()函数可以参阅setInterval()函数用法详解一章节。
5.offsetLeft属性可以参阅js的offsetTop好offsetLeft属性用法详解一章节。
js实现的侧边栏展开收缩效果的更多相关文章
- 原生态js单个点击展开收缩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 点击UITableView的cell展开收缩
在项目中有个需求,点击表视图的单元格展开,再点击另外一个单元格或者本身又收缩,经过一段时间尝试,实现了该功能,现在记录分享总结下. 首先要理解UITableView代理方法调用的先后顺序. 当 ...
- 右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js之展开收缩菜单，用到window.onload ,onclick,
目标效果:点击标签1,如果列表标签的style的display是block,改成none,否则改成block,来达到展开收缩菜单效果 一.准备阶段 html文件 <!DOCTYPE html&g ...
- jQuery弹性展开收缩菜单插件gooey.js
分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <hea ...
- js 实现内容的展开和收缩
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- HTML5每日一练之details展开收缩标签的应用
details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...
- jQuery展开收缩2
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
随机推荐
- Visio中添加、移动或删除形状上的连接点的方法
Visio中添加.移动或删除形状上的连接点的方法 利用Visio画图时,学会使用连接点能使你的画图质量和速度大幅度提高.下面在Visio2010中,以一个例子讲述如何使用连接点. 一. 准备 1. 打 ...
- shell telnet 路由器
#!/usr/bin/expect -f spawn telnet 172.16.1.80 expect "login" { send "admin\n" ex ...
- 把linux可执行程序做成一个服务[转]
转自:http://www.2cto.com/os/201202/121249.html 在linux系统启动的时候,我们可以看到很多服务性程序一个接一个的被启动(就是那些后面有一个兰色[OK]的行) ...
- hdu 4778 Rabbit Kingdom(减少国家)
题目链接:hdu 4778 Rabbit Kingdom 题目大意:Alice和Bob玩游戏,有一个炉子.能够将S个同样颜色的宝石换成一个魔法石.如今有B个包,每一个包里有若干个宝石,给出宝石的颜色. ...
- RTSP 消息拼装实例代码
整理了下之前文章提到的RTSP实例的代码,主要是拼装各类消息字段. 首先,抽取一个公共函数,用来根据消息类型,生成不同的format,供sprintf试用. char * GetRTSPCmd( co ...
- Android菜鸟的成长笔记（1）——Android开发环境搭建从入门到精通
原文:Android菜鸟的成长笔记(1)--Android开发环境搭建从入门到精通 今天在博客中看到好多Android的初学者对Android的开发环境的搭建不熟悉而导致不能进行学习,所以我决定自己写 ...
- 【MongoDB】学习MongoDB推荐三本书
近期学习mongodb,感觉这三本书写得不错.非常大家分享一下:
- Maven的生命周期
每次读.每次忘,Mark一下以后忘记就不翻书了! Maven有三套相互独立的生命周期,各自是:clean.default.site. clean主要是清理项目. default是Maven最核心的的构 ...
- Silverlight 5(C#)初探
接了个单子,非要用Silverlight 5来作一个项目,之前从来没接触过这东西,为了工作.硬着头皮也要上了.摸索了一晚上,大至整理出一些项目中须要的东西,下面作为初探记录: Silverlight ...
- EditTex属性
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tool ...