JS 运动基础 提示栏拉出与隐藏

<style>

*{
padding: 0;
margin: 0;
}
#div1{
width: 150px;
height: 200px;
background-color: orange;
position: relative;
left: -150px;
top: 10px;

}
span{
position: absolute;
width: 20px;
height: 60px;
line-height: 20px;
top: 70px;
background-color: gray;
left: 150px;
color: white;
}
</style>

<script>
window.onload=function(){
var oDiv=document.getElementById('div1');

oDiv.onmouseover=function(){
moveStart(0);
}

oDiv.onmouseout=function(){
moveStart(-150);
}
var timer=null;
//1.判断运动方向，设置速度；2.关闭已有定时器；3.if else 运动开始和停止
function moveStart(iTarget){
var speed=0;
if(oDiv.offsetLeft>iTarget){
speed=-10;
}
else{
speed=10;
}

clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==iTarget){
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30)
}
}
</script>