鲁达 题外话：有些细心的朋友已经发现我每天跟大家分享知识的出处了，果真是高手在民间呀...
进入主题，今天主要是运用昨天的知识做出一个侧边栏的效果，如下图：
当鼠标放到“分享到”时，侧边栏显示出来，鼠标离开后，侧边栏又隐藏起来。
设计思路
1、设计初始页面
<body>
<div id="div1">
<p><a href="">微信</a></p>
<p><a href="">朋友圈</a></p>
<p><a href="">......</a></p>
<span id="sp">分享到</span>
</div>
2、给页面加上CSS样式。让div先隐藏起来，只留下“分享到”的span。这里靠定位来实现隐藏，而非display来设置，切记。
<style>
*{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;}
</style>
3、利用昨天的知识，先做一个运动函数startMove()出来。因为涉及到又要显示出来又要隐藏，就意味要有两个速度，如何判断速度为正为副，主要是看移动的目标位置是多少，通过判断目标位置与div的offsetLeft比较，判断是向显示出来还是隐藏进去。
var oDiv = document.getElementById('div1');
var TimerId=0;
function startMove(iTag)
{
var speed = (iTag -oDiv.offsetLeft)>0?10:-10;
clearInterval(TimerId);
TimerId = setInterval(function () {
i) //运动到目标位置后停止
clearInterval(TimerId);
else
oDiv. = oDiv.offsetLeft + speed + 'px';
},30);
}
4、给span和div添加鼠标移入和移出效果。
var oSpan = document.getElementById('sp');
oDiv.onmousemove = oS = function ()
{
startMove(0);
};
oDiv.onmouseout = oS = function ()
{
startMove(-150);
};
好了，效果已经全部出来了。虽然说例子比较简单，但需要注意的细节还是挺多的。大家可以细细揣摩一下，还是那句话，再复杂的效果，拆开来就是这一个一个基础的方法。