<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{overflow: hidden;}
#box{
150px;
height:300px;
background: #ccc;
position: absolute;
right:-150px;
top:50%;
margin-top:-150px;
}
#to{
30px;
height: 60px;
position: absolute;
background: red;
color:#fff;
left:-30px;
top:50%;
margin-top:-30px;
text-align:center;
}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oBox=document.getElementById("box");
var oTo=document.getElementById("to");
oBox.onmouseover=function(){
move(oBox,{right:0},{time:500,easing:'ease-out'});
}
oBox.onmouseout=function(){
move(oBox,{right:-150},{time:500,easing:'ease-out'});
}
}
</script>
</head>
<body>
<div id="box">
<span id="to">分享到</span>
</div>
</body>
</html>