<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width:150px;
height:200px;
background: pink;
position: absolute;
}
#div1 span{
width:30px;
height:60px;
background: deepskyblue;
position: absolute;
right:-30px;
top:60px;
}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById('div1');
var timer="null";
oDiv1.onmousemove=function(){
move(0);
}
oDiv1.onmouseout=function(){
move(-150);
}
function move(iTarget){
var oDiv1=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed;
if(oDiv1.offsetLeft>iTarget){
speed=-5;
}
else{
speed=5;
}
if(oDiv1.offsetLeft==iTarget){
clearInterval(timer);
}
else{
oDiv1.style.left=oDiv1.offsetLeft+speed+'px';
}
},30);
}
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>
