首页 > 代码库 > 弹性菜单
弹性菜单
/**弹性菜单的目标点的获得：
* 目标点不是确定的,其实就是当前li的位置**/
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>5.弹性菜单</title> 8 <meta name="author" content="Administrator" /> 9 <!-- Date: 2014-12-13 -->10 <style>11 *{margin:0;padding:0;font-size:13px;font-family:microsoft yahei}12 ul{margin:40px auto;position:relative}13 li{list-style:none;float:left;width:130px;height:30px;text-align:center;line-height:30px;}14 li.box{margin:0 3px;background:#DE4465;}15 #mask{position:absolute;background:#2272BD;left:0;top:0;opacity:0.5}16 </style>17 <script>18 /**弹性菜单的目标点的获得：19 * 目标点不是确定的,其实就是当前li的位置**/20 window.onload=function(){21 var oUl=document.getElementsByTagName(‘ul‘)[0];22 var aLi=getByClassName(oUl,‘li‘,‘box‘);23 var oMask=document.getElementById(‘mask‘);24 var arr=[];25 var timer=null;26 var iSpeed=0;27 28 29 oUl.style.width = (oUl.getElementsByTagName(‘li‘).length)*aLi[0].offsetWidth +‘px‘;30 oUl.style.margin = ‘40px auto‘31 oMask.style.left = aLi[0].offsetLeft + ‘px‘;32 for(var i=0;i<aLi.length;i++){33 34 aLi[i].onmouseover=function(){35 bonce(this.offsetLeft); 36 }37 }38 39 console.log(arr)40 41 function bonce(iTarget){42 43 clearInterval(timer);44 timer=setInterval(function(){45 iSpeed += (iTarget - oMask.offsetLeft)/6;46 iSpeed *= 0.75;47 if( Math.abs( iSpeed ) <= 1 && Math.abs( iTarget - oMask.offsetLeft ) <= 1 ){48 clearInterval(timer);49 50 oMask.style.left = iTarget +‘px‘;51 iSpeed = 0;52 }else{53 oMask.style.left = oMask.offsetLeft + iSpeed +‘px‘54 }55 },30)56 }57 58 59 }60 61 62 /**通过class来获取元素**/63 function getByClassName(oParent,tagName,className){64 var arr=[];65 var als=oParent.getElementsByTagName(tagName);66 for(var i=0;i<als.length;i++){67 var a1=als[i].className.split(‘ ‘);68 for(var j=0;j<a1.length;j++){69 if(a1[j]==className){70 arr.push(als[i]);71 break;72 } 73 } 74 }75 return arr76 } 77 </script>78 </head>79 <body>80 <ul>81 <li id="mask"></li>82 <li class="box">首页</li>83 <li class="box">学员</li>84 <li class="box">课程</li>85 <li class="box">关于</li>86 <li class="box">留言</li>87 <li class="box">论坛</li>88 </ul>89 </body>90 </html>
弹性菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。