效果图：
功能实现：正常情况下，只显示分享，当鼠标移到分享的时候，左边的内容显示。鼠标离开左边的内容隐藏。html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0px auto; padding:0px;} #div1{width:120px; height:300px; position:absolute; left:-120px; border:1px solid #CCC;} #div1 span{ position:absolute; width:20px; height:60px; line-height:30px; vertical-align:middle; background: #0CF; right:-20px; top:70px; border-bottom-right-radius:7px; border-top-right-radius:7px;} .biaoti{ width:120px; height:30px; background:#CCC; color:#000; font-weight:bold; vertical-align:middle; line-height:30px;margin-top:0px;} #div1 ul{ float:left; width:120px; } #div1 ul li{ list-style:none; margin-top:10px; margin-left:10px; } #div1 ul a{ text-decoration:none; color:#000;} #div1 ul a:hover{ color:#F00;} #div1 ul li img{ width:15px; height:15px; margin-right:10px;} </style> </head> <body> <div id="div1"> <div class="biaoti">分享到</div> <ul> <a href="#"><li><img src="img/qq空间.png">QQ空间</li></a> <a href="#"> <li><img src="img/新浪微博.png">新浪微博</li></a> <a href="#"><li><img src="img/百度.png">百度搜藏</li></a> <a href="#"> <li><img src="img/人人.png">人人网</li></a> <a href="#"><li><img src="img/腾讯微博.png">腾讯微博</li></a> <a href="#"> <li><img src="img/开心网.png">开心网</li></a> <a href="#"><li><img src="img/腾讯.png">腾讯朋友</li></a> <a href="#"><li><img src="img/更多.png">更多</li></a> </ul> <span>分享</span> </div> </body> </html>
js代码：
<script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(0); } oDiv.onmouseout=function(){ startMove(-120); } } 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'; } },30); } </script>