JS实现侧边栏鼠标经过弹出框+缓冲效果

可能这个标题起得不够恰当，简单来说就是：当鼠标移到最左侧时，移出一个框。
首先，我们用两个div来简单布局以下页面：

<div id="box">
    <div id="share">分享到</div>
</div>

这个分享框的弹出原理是：把内层div定位到外层div最右侧紧贴，然后把外层div定位到屏幕左外测，left的值与宽度相等，刚好隐藏掉就可以。当鼠标经过时，再通过改变left的值使外层div显示出来。

<script type="text/javascript">
    window.onload=function(){
    var oBox=document.getElementById('box');
    var oShare=document.getElementById('share');
    var timer=null;  //定义一个空的定时器

    function startmove(iTarget){
        var speed=0;  //定义步长
        clearInterval(timer); //每次调用函数后，先执行关闭定时器的代码，目的是防止多次操作导致计时器叠加出现变速的Bug
        timer=setInterval(function(){
            if(oBox.offsetLeft<iTarget){  //目标值从事件调用函数中传入，当盒子左边距小于目标值时，说明还没移动到指定位置，让步长=10，往右运动
                speed=10;
            }
            else{    //否则就是超过了目标值，让步长=-10，往左运动
                speed=-10;
            }
            if(oBox.offsetLeft==iTarget){   //当盒子左边距等于目标值时，就关闭计时器
                clearInterval(timer);
            }
            else{
                oBox.style.left=oBox.offsetLeft+speed+'px';   //盒子左边的距离，即移动的距离，注意加上单位；这个else分支也解决了一个bug:当满足条件停下来后，继续点击还会运动，所以加上else分支
            }
        },30)
    }
    //函数调用          
    oBox.onmouseover=function(){
        startmove(0);
    }
    oBox.onmouseout=function(){
        startmove(-200);
    }
}
</script>

这里要注意的几个点：1、分析清楚offsetLeft与目标值的关系，什么时候步长为正，什么时候步长为负；2、offsetLeft获取出来不带单位，所以在设置left的值时要记得加上单位。
容易出现的几个bug：1、在设置步长时，当步长不能被整除，在关闭计时器的条件上写==，会出现盒子运动不停的bug，改为>=或者修改步长来修复Bug；2.3、在注释里说明。

缓冲效果

原理：根据计算出的步长进行运动，大于0向左运动，小于0向右运动。缓冲运动不仅视觉上更和谐，而且也更为方便。

<script type="text/javascript">
    window.onload=function(){
        var oBox=document.getElementById('box');
        var timer=null;
        function startmove(iTarget){
            clearInterval(timer);
            timer=setInterval(function(){
                //求步长，为正向右移动，为负向左移动，10为自定义
                var speed=(iTarget-oBox.offsetLeft)/10; 
                //对步长取整，大于0向上取整，小于0向下取整，原因就是正数越来越大，负数越来越小
                speed=speed>0?Math.ceil(speed):Math.floor(speed); 
                //设置left的值
                oBox.style.left=oBox.offsetLeft+speed+'px';
            },30)
        }

        oBox.onmouseenter=function(){
            startmove(0);
        }
        oBox.onmouseleave=function(){
            startmove(-200);
        }
    }
</script>