废话不多说，直接上效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#container{
height: 200px;
width: 200px;
position: relative;
left: -200px;
background-color: #6effcd;
margin-top: 50px;
}
#btn{
height: 90px;
width: 30px;
position: absolute;
left: 200px;
top: 65px;
background-color: #73eeff;
text-align: center;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<span id="btn">点击展开</span>
</div>
<script>
window.onload = function(){
var container=document.getElementById('container');
var btn=document.getElementById('btn');
btn.onclick = function(){
if(container.offsetLeft==0)
{
moveStart(-200);
btn.innerHTML='点击展开'
}
else{
moveStart(0);
btn.innerHTML='点击收缩'
}
};
};
var timer = null;
function moveStart(Target)
{
clearInterval(timer);
timer=setInterval(function(){
var speed=(Target-container.offsetLeft)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(container.offsetLeft==Target)
{
clearInterval(timer);
}
else{
container.style.left=container.offsetLeft+speed+'px';
}
},30)
}
</script>
</body>
</html>
