JavaScript鼠标进入与退出监听动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分享</title>
<style type="text/css">
.div{
150px;
height: 150px;
background-color: red;
position: absolute;
left: -150px;
top: 150px;
}

.share{
background-color: blue;
position:relative;
left: 150px;
top: 75px;
}
</style>
</head>
<script type="text/javascript">

var div
function init(){

div = document.getElementsByTagName("div")[0];
//var span = document.getElementsByTagName("span")[0];
div.onmouseover = function(){
//当鼠标进入的时候触发事件
startMove(true);
}
div.onmouseout = function(){
//当鼠标移除的时候触发事件
startMove(false);
}
}

var timer;
function startMove(isEnter){
clearInterval(timer);
timer = setInterval(function(){
if(isEnter){
//当鼠标进入的时候
div.style.left = div.offsetLeft +1 +"px";
if(div.offsetLeft >= 0){
clearInterval(timer);
}

//document.write("enter:"+div.style.left)
}else{
//当鼠标退出时
div.style.left = div.offsetLeft - 1 +"px";
if(div.offsetLeft <= -150){
clearInterval(timer);
}

}
},10);
}

</script>