您的位置：首页 > Web前端 > JavaScript

js实现的侧边栏展开收缩效果

2014-10-14 13:53 543 查看

原文地址：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属性用法详解一章节。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航