‘分享到’侧边栏制作

运动框架的应用：制作‘鼠标移入移出（分享到）’

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

 

#div1 {
    width: 150px;
    height: 200px;
    background: green;
    position: absolute;
    left:-150px;
}

#div1 span {
    position: absolute;
    width: 20px;
    height: 60px;
    line-height: 20px;
    background: purple;
    right:-20px;
    top:70px;
}

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