/**弹性菜单的目标点的获得：
* 目标点不是确定的,其实就是当前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>
时间： 2024-10-06 02:46:33