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>