//----------使用事件完成了"分享到"菜单,自动弹出或收入
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>shareMenu</title> 6 </head> 7 <style type="text/css"> 8 div,li,ul{margin: 0px;padding: 0px;} 9 #shareMenu{ 100px;height: 200px;position: absolute;background:#ADC;display: block;left: -100px;top: 100px;} 10 #shareIco{ 20px;height: 70px;position: absolute;background: #BCD;left: 100px;top: 65px;line-height: 20px;} 11 li{list-style: none;margin: 10px 10px;} 12 </style> 13 <script type="text/javascript"> 14 window.onload=function(){ 15 var timer; 16 oIco=document.getElementById('shareIco'); 17 oMenu=document.getElementById('shareMenu'); 18 function shareTo(mark,iSpeed){ 19 clearInterval(timer); 20 timer=setInterval(function(){ 21 if(oMenu.offsetLeft==mark) clearInterval(timer); 22 else oMenu.style.left=oMenu.offsetLeft+iSpeed+'px'; 23 },30) 24 } 25 oMenu.onmouseover=oIco.onmouseover=function(){shareTo(0,20);} 26 oIco.onmouseout=oMenu.onmouseout=function(){shareTo(-100,-20);} 27 } 28 </script> 29 <body> 30 <div id="shareMenu"> 31 <span id="shareIco">分享到</span> 32 <ul> 33 <li>腾讯微博</li> 34 <li>QQ空间</li> 35 <li>朋友圈</li> 36 <li>facebook</li> 37 <li>腾讯微博</li> 38 <li>腾讯微博</li> 39 </ul> 40 </div> 41 </body> 42 </html>