就是当鼠标移到上面的时候，他会出现，鼠标移出就消失。
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>
其实特别简单，只要收敲敲就会，