模拟百度分享侧边栏的弹出与滑入效果。当鼠标移入#div1分享侧边栏，#div1分享侧边栏区块匀速滑出直至其全部露出。当鼠标移除#div1分享侧边栏，#div1分享侧边栏区块匀速滑入隐藏，直至恢复初始位置。若#div1区块未全部露出时，鼠标移出，#div1区块则开始滑入隐藏；若#div1区块未全部滑入隐藏，鼠标移入，则div1区块则开始匀速弹出。

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

参考代码：

参考代码（1）以目标点作为参数，如果目标点为0，速度为正，目标点为-150，速度为负。如果运动抵达目标点，那么关闭定时器；否则left值发生变化。

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);  

}

参考代码（2）以每次运动的距离作为参数，鼠标移入参数为正，鼠标移除参数为负。

window.onload = function () {  
    oDiv = document.getElementById('div1');  
    function startMove(speed) {  
        var iTarget = null;  
        clearInterval(oDiv.timer);

        oDiv.timer = setInterval(function () {

            if (speed > 0) {

                iTarget = 0;

            } else {  
                iTarget = -150;  
            }

            var l=Math.abs(iTarget-oDiv.offsetLeft);  
            var s=Math.abs(speed);

            if (l<=s) {  
                oDiv.style.left=iTarget+'px';  
                clearInterval(oDiv.timer);

            } else {

                oDiv.style.left = oDiv.offsetLeft + speed + 'px';  
            }

        }, 30);

    }

    oDiv.onmouseover = function () {  
        startMove(10)  
    }  
    oDiv.onmouseout = function () {  
        startMove(-10)

    }

}

debug版本：为什么采用如下的代码，在弹出时，最终会多出10px距离？

window.onload = function () {  
    oDiv = document.getElementById('div1');  
    function startMove(speed) {

        var iTarget = null;  
        clearInterval(oDiv.timer);

        oDiv.timer = setInterval(function () {  
            if (speed > 0) {

                iTarget = 0;

            } else {  
                iTarget = -150;  
            }  
            //bug：为什么在弹出时，会多出来10px？  
            if (speed > 0 && iTarget - oDiv.offsetLeft <= speed) {

                oDiv.style.left = iTarget + 'px'  
                clearInterval(oDiv.timer);

            } else {

                oDiv.style.left = oDiv.offsetLeft + speed + 'px';  
            }

            if (speed < 0 && iTarget - oDiv.offsetLeft >= speed) {  
                oDiv.style.left = iTarget + 'px'  
                clearInterval(oDiv.timer);

            } else {

                oDiv.style.left = oDiv.offsetLeft + speed + 'px';  
            }

        }, 30);

    }

    oDiv.onmouseover = function () {  
        startMove(10)

    }  
    oDiv.onmouseout = function () {  
        startMove(-10)

    }

}

　　debug代码：

window.onload = function () {  
    oDiv = document.getElementById('div1');  
    function startMove(speed) {

        var iTarget = null;  
        clearInterval(oDiv.timer);

        oDiv.timer = setInterval(function () {  
            if (speed > 0) {

                iTarget = 0;

            } else {  
                iTarget = -150;  
            }  
            //bug：为什么在弹出时，会多出来10px？  
            /\* 编码逻辑错误，应该采用if(){……}else if(){}语法，而不是并列的两个if(){……}else{……}。因为当判断语句【1】执行条件if满足时，同样满足判断语句【2】的else语句代码，导致多出来10px。  
             \*  
             \*/

            //  当鼠标移入时，判断语句【1】，如果speed大于0且与目标点距离不大于speed时， oDiv.style.left直接设置为目标点并关闭定时器，否则继续运动。  
            if (speed > 0 && iTarget - oDiv.offsetLeft <= speed) {

                oDiv.style.left = iTarget + 'px';

                clearInterval(oDiv.timer);

            } else {

                oDiv.style.left = oDiv.offsetLeft + speed + 'px';  
            }  
            // 当鼠标移出时， 判断语句【2】，如果speed小于0且与目标点距离不大于speed时， oDiv.style.left直接设置为目标点并关闭定时器，否则继续运动。  
            if (speed < 0 && iTarget - oDiv.offsetLeft >= speed) {

                oDiv.style.left = iTarget + 'px';

                clearInterval(oDiv.timer);

            } else {

                oDiv.style.left = oDiv.offsetLeft + speed + 'px';  
            }

        }, 30);

    }

    oDiv.onmouseover = function () {  
        startMove(10)

    }  
    oDiv.onmouseout = function () {  
        startMove(-10)

    }

}