<style>
        *{padding: 0; margin: 0;}
        #div1{ width: 150px; height: 200px; background: red; position: absolute; left: -150px;}
        #div1 span{width: 20px; height: 60px; position: absolute; line-height: 20px; background: blue; right: -20px; top: 70px;}
    </style>

<script>
        window.onload=function(){
            var oDiv = document.getElementById("div1");
            oDiv.onmouseover=function(){
                startMove(0);
            };
            oDiv.onmouseout=function(){
                startMove(-150);
            }
        }
        var timer=null;
        function startMove(iTarget){
            var oDiv = document.getElementById("div1");
            clearInterval(timer);
            timer = setInterval(function(){
                var speed = 0;
                if(oDiv.offsetLeft>iTarget){
                    speed=-10;
                }else{
                    speed=10;
                }
                if(oDiv.offsetLeft==iTarget){
                    clearInterval(timer);
                }else{
                    oDiv.style.left=oDiv.offsetLeft+speed+"px";
                }
            },30);
        }
    </script>

<div id="div1">
    <span>分享到</span>
</div>