Edit in JSRUN

console 命令行工具 X clear

                    
>
console
var timer;
window.onload = function () {
    var box = document.getElementById('main'),
        maxLeft = box.offsetLeft;

    box.onmouseover = function () {
        clearInterval(timer);
        toMove(maxLeft - 400);
    }

    box.onmouseout = function () {
        clearInterval(timer);
        toMove(maxLeft);
    }
}
function toMove (target) {
    var box = document.getElementById('main');
    timer = setInterval(function () {
        if (box.offsetLeft == target) {
            clearInterval(timer);
        } else {
            var speed = (target - box.offsetLeft)/20;
            if (speed < 0) {
                speed = Math.floor(speed);
            } else {
                speed = Math.ceil(speed);
            }
            console.log(speed);
            box.style.left = box.offsetLeft + speed + "px";
        }
    },10);
}
<body>
    <div id="main">
        <div class="shift">
            <span>分享</span>
        </div>
    </div>
</body>
html, body, div {margin: 0; padding: 0; }
body {overflow: hidden; }
div {position: absolute; }
div#main {width:400px; height: 400px; background-color: red; border-top-left-radius: 20px; border-bottom-left-radius: 20px; right: -400px; bottom: 0; }
div.shift {top: 50%; right: 100%;}
span {display: inline-block; background-color: blue; height:100px; width: 50px; position:relative; top: -50px; font-size: 44px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }