<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="Cache-Control" content="no-transform" />
<style>
*{margin:0px;}
#div1{200px;height:200px;position: absolute;left:-200px;background: #0f0}
#div1 span{20px;height:50px;position: absolute;top: 80px;left:200px;background: #0ff}
</style>
<script>
window.onload = function(){
var odiv1 = document.getElementById("div1");
odiv1.onmouseover = function(){
move(0);
}
odiv1.onmouseout = function(){
move(-200);
}
}
var timer = null;
function move(mubiao){
var odiv1 = document.getElementById("div1");
timer = setInterval( function (){
var speed = 0;
if(odiv1.offsetLeft>mubiao){
speed = -10;
}else
{
speed = 10;
}
if(odiv1.offsetLeft == mubiao){
clearInterval(timer);
}
else{
odiv1.style.left = odiv1.offsetLeft + speed +'px';
}
}, 30)
}
</script>
</head>
<body>
<div id="div1" ><span></span>
</div>
</body>
</html>