//----------使用事件完成了"分享到"菜单,自动弹出或收入 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{width: 100px;height: 200px;position: absolute;background:#ADC;display: block;left: -100px;top: 100px;}
10 #shareIco{width: 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>
时间： 2024-10-12 18:36:53