弹性菜单 加了 透视效果 运动 小案例

/**弹性菜单 加了透视效果,类似滚动歌词的效果

*运动过程中,背景色和颜色都会改变,实现原理见 滚动歌词篇
* 小bug 当设置字体为 微软雅黑时,运动过程中菜单中的字体会有小抖动,修复方法,left值不能直接赋值,先存起来**/

  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>7.弹性菜单 + 透视效果 </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;text-align:center}
 12             ul{margin:40px auto;position:relative;width:816px;}
 13             li{list-style:none;float:left;width:100px;height:30px;text-align:center;line-height:30px;margin-right:5px;}
 14             li.box{background:#DE4465;}
 15             #mask{position:absolute;background:#2272BD; top:0; overflow:hidden}
 16             #mask #ul2{width:816px; position: absolute;color:#fff;margin:0 auto;}
 17              
 18         </style>
 19         <script>
 20         /**弹性菜单的目标点的获得：
 21          * 目标点不是确定的,其实就是当前li的位置
 22          * 小bug 当设置字体为 微软雅黑时,运动过程中菜单中的字体会有小抖动,修复方法,left值不能直接赋值,先存起来**/
 23             window.onload=function(){
 24                 var oUl=document.getElementById('menu');
 25                 var oUl2=document.getElementById('ul2');
 26                 var aLi=getByClassName(oUl,'li','box');
 27                 var oMask=document.getElementById('mask');
 28                  
 29                 var timer=null;
 30                 var timer2=null;
 31                 var iSpeed=0;
 32                 var left=0;
 33                 
 34                 document.title = oMask.offsetLeft + '-' + aLi[0].offsetLeft;
 35                  
 36                 for(var i=0;i<aLi.length;i++){
 37                      
 38                     aLi[i].onmouseover=function(){
 39                          clearInterval( timer2 );//清除timer2,让oMask不回到0
 40                           bonce(this.offsetLeft);  
 41                      }
 42                      
 43                      //当oMask运动到当前li上的时候,鼠标已经离开了li了
 44                      aLi[i].onmouseout=function(){
 45                          timer2=setTimeout(function(){//加一个延时定时器,让 oMask 不立即回到0
 46                              bonce( aLi[0].offsetLeft )
 47                          },100)
 48                      }
 49                 }
 50 
 51               //在0 - 100 毫秒内,当鼠标在oMask上面的时候,关闭 延时定时器,那么oMask就不会回到0了
 52                 oMask.onmouseover=function(){
 53                     clearInterval( timer2 )
 54                 } 
 55                 
 56                 //当鼠标离开oMask后,再让oMask回到0
 57                 oMask.onmouseout=function(){
 58                     timer2=setTimeout(function(){//加一个延时定时器,让 oMask 不立即回到0
 59                          bonce( aLi[0].offsetLeft );
 60                      },100)
 61                 }
 62                 
 63                 function bonce(iTarget){
 64                  
 65                  clearInterval(timer);
 66                  timer=setInterval(function(){
 67                      iSpeed += (iTarget - oMask.offsetLeft)/6;
 68                      iSpeed *= 0.75;
 69                      if( Math.abs( iSpeed ) <= 1 && Math.abs( iTarget - oMask.offsetLeft ) <= 1 ){
 70                          clearInterval(timer);
 71                          oMask.style.left = iTarget +'px';
 72                          oUl2.style.left = -iTarget +'px';
 73                          iSpeed = 0;
 74                      }else{
 75                          left=oMask.offsetLeft + iSpeed; //运动过程中菜单中的字体会有小抖动,修复方法,left值不能直接赋值
 76                          oMask.style.left = left +'px';
 77                          oUl2.style.left = -left + 'px';
 78                          document.title=obj.offsetLeft+'|'+iTarget+'|speed='+iSpeed;
 79                      }
 80                  },30)
 81             }
 82             }
 83       
 84             
 85             /**通过class来获取元素**/
 86             function getByClassName(oParent,tagName,className){
 87                     var arr=[];
 88                     var als=oParent.getElementsByTagName(tagName);
 89                     for(var i=0;i<als.length;i++){
 90                         var a1=als[i].className.split(' ');
 91                         for(var j=0;j<a1.length;j++){
 92                             if(a1[j]==className){
 93                                 arr.push(als[i]);
 94                                 break;
 95                             } 
 96                         }    
 97                     }
 98                     return arr
 99             }    
100         </script>
101     </head>
102     <body>
103         <ul id="menu">
104             <li id="mask"><!--mask 相当于滚动歌词的div2-->
105                 <ul id="ul2"><!--ul 相当于滚动歌词的div2的span-->
106                     <li>首页</li>
107                     <li>学员</li>
108                     <li>课程</li>
109                     <li>关于</li>
110                     <li>留言</li>
111                     <li>论坛</li>  
112                 </ul>
113             </li>
114             <li class="box">首页</li>
115             <li class="box">学员</li>
116             <li class="box">课程</li>
117             <li class="box">关于</li>
118             <li class="box">留言</li>
119             <li class="box">论坛</li>
120         </ul>
121     </body>
122 </html>

 

posted @ 2014-12-13 21:40  miyaye  阅读(158)  评论(0)  编辑  收藏  举报