Day10-------shareMenu 

 //----------使用事件完成了"分享到"菜单,自动弹出或收入
 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>

 

posted on 2014-11-30 03:56  fleshy  阅读(150)  评论(0)    收藏  举报

导航