首页 > 代码库 > Day10-------shareMenu
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>
Day10-------shareMenu
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。