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>14.用弹性运动框架写的弹性菜单 </title>
8 <meta name="author" content="Administrator" />
9 <style>
10 *{margin:0;padding:0;font-size:13px;font-family:microsoft yahei}
11 ul{margin:40px auto;position:relative}
12 li{list-style:none;float:left;width:130px;height:30px;text-align:center;line-height:30px;}
13 li.box{margin:0 3px;background:#DE4465;}
14 #mask{position:absolute;background:#2272BD; top:0;opacity:0.5;margin:0}
15 </style>
16 <script>
17 window.onload=function(){
18 var oUl=document.getElementsByTagName('ul')[0];
19 var aLi=document.getElementsByTagName('li');
20 var oMask=document.getElementById('mask');
21 var timer2=null;
22 for(var i=0;i<aLi.length;i++){
23 aLi[i].onmouseover=function(){
24 clearTimeout( timer2 )
25 bb(oMask,{'left':this.offsetLeft})
26 }
27 aLi[i].onmouseout=function(){
28 timer2=setTimeout(function(){
29 bb(oMask,{'left':0})
30 },100)
31 }
32 }
33
34 oMask.onmouseover=function(){
35 clearTimeout( timer2 )
36 }
37 oMask.onmouseout=function(){
38 bb(oMask,{'left':0})
39 }
40 }
41 function bb(obj,json){
42
43 clearInterval(obj.timer);
44
45 obj.timer=setInterval(function(){
46
47 var iBtn = true;
48
49 for( var attr in json ){
50 /**代码块**/
51 if( !obj.iSpeed ) obj.iSpeed={};
52 if( !obj.iSpeed[attr] ) obj.iSpeed[attr]=0;
53
54 var iTarget = json[attr];
55 var iCur = parseInt( getStyle( obj,attr ) );
56
57 obj.iSpeed[attr] += (iTarget - iCur)/6;
58 obj.iSpeed[attr] *= 0.75;
59
60 if( Math.abs(obj.iSpeed[attr]) <=1 && Math.abs( iTarget - iCur )<=1 ){
61 obj.iSpeed[attr]=0;
62 obj.style[attr] = iTarget +'px'
63 }else{
64 iBtn = false;
65 var sNow= iCur + obj.iSpeed[attr];
66 if( attr =='width' || attr =='height' ){
67 if( sNow < 0 ) sNow =0;
68 }
69 obj.style[attr] = sNow +'px';
70 }
71 document.title = iCur +'-'+obj.iSpeed[attr];
72 /**代码块**/
73 }
74
75 if( iBtn ){
76 clearInterval( obj.timer );
77
78 }
79
80
81 },30)
82 }
83
84 function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
85
86
87 </script>
88 <!-- Date: 2014-12-15 -->
89 </head>
90 <body>
91 <ul>
92 <li id="mask"></li>
93 <li class="box">首页</li>
94 <li class="box">学员</li>
95 <li class="box">课程</li>
96 <li class="box">关于</li>
97 <li class="box">留言</li>
98 <li class="box">论坛</li>
99 </ul>
100 </body>
101 </html>
