JS实现"分享到"侧边栏

<div id="div1">
<p><a href="">QQ空间</a></p>
<p><a href="">新浪微博</a></p>
<p><a href="">......</a></p>
<span id="sp">分享到</span>
</div>

*{margin:0;padding:0;}
div{left:-150px;top:100px;width:150px;height:200px;background: #00ffff;position: relative;}
div span{width:20px;height: 70px;position: absolute;right:-20px;top:70px;background: #00ff00;cursor: pointer;}

window.onload = function ()
{
var oDiv = document.getElementById('div1');
var oSpan = document.getElementById('sp');
var TimerId=0;
oDiv.onmousemove = oSpan.onmouseover = function ()
{
startMove(0);
};
oDiv.onmouseout = oSpan.onmouseout = function ()
{
startMove(-150);
};
//iTag是运动到目标位置的参数
function startMove(iTag)
{
var speed = (iTag -oDiv.offsetLeft)>0?10:-10;
clearInterval(TimerId);
TimerId = setInterval(function () {
if(oDiv.offsetLeft==iTag)   //运动到目标位置后停止
clearInterval(TimerId);
else
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
},30);
}
};