标签：style blog http io ar color os sp for
/**弹性菜单的目标点的获得：
* 目标点不是确定的,其实就是当前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 arr 76 } 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>
标签：style blog http io ar color os sp for
原文地址：http://www.cnblogs.com/webskill/p/4161534.html
