用弹性运动框架写的弹性菜单 

  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>

 

posted @ 2014-12-15 10:28  miyaye  阅读(116)  评论(0)    收藏  举报