JavaScript鼠标滑过动画效果

<style>
*{margin:0;padding:0;}
#box{width:200px;height:300px; background: #f00; position: relative;left:-200px;top:0;cursor:pointer;}
#box input{ position: absolute;width:30px; cursor:pointer;outline:none;height:60px;top:125px;right:-30px;word-break:break-all; background: #000;border:none;color:#fff;}

</style>

<script>
window.onload=function(){
var oDiv=document.getElementById("box");
oDiv.onmouseover=function(){
myMove(0);
}
oDiv.onmouseout=function(){
myMove(-200);
}
}
var timer=null;
function myMove(iTarget){
clearInterval(timer);
var oDiv=document.getElementById("box");
timer=setInterval(function(){
var speed=(iTarget-oDiv.offsetLeft)/5;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(oDiv.offsetLeft==iTarget){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+"px";
}
},30)
}

</script>

<div id="box">
<input type="button" id="btn" value="分享" />
</div>

来自前端菜鸟转载：http://www.bird100.cn/