就是当鼠标移到上面的时候，他会出现，鼠标移出就消失。
nmouseover和nmouseout就能实现
<style>
*{padding:0;margin:0;}
#s1{width:200px ;
background:red;
height:200px;
position:absolute;
top:50px;
left:-200px;
cursor:pointer;}
#s1 span
{display:block;height:80px;width:20px;left:200px;background:blue;position:absolute;left:200px;top:50px;}
}
</style> <body>
<div id="s1">
<span>分享到</span>
</div>
</body>
js代码如下
<script>
window.onload=function()
{
var div1=document.getElementById("s1");
var span1=s1.getElementsByTagName("span")[0]; div1.onmouseover=function()
{
startMove(0);
}
div1.onmouseout=function()
{
startMove(-200);
}
};
var timer=null;
function startMove(ti)
{
var div1=document.getElementById("s1");
clearInterval(timer);
timer=setInterval(function()
{
var speed=null;
if (div1.offsetLeft>ti) //先判断他的速度是正的还是负的，如果offsetLeft大于0，速度为负
{
speed=-10;
}
else //否则速度为正，显示div要出来
{
speed=10;
} if (div1.offsetLeft==ti) //相等，停止运动
{
clearInterval(timer);
}
else //不相等，做匀速运动
{
div1.style.left=div1.offsetLeft+speed+'px';
}
},30);
}
</script>
其实特别简单，只要收敲敲就会，