/**弹性菜单 加了透视效果,类似滚动歌词的效果
*运动过程中,背景色和颜色都会改变,实现原理见 滚动歌词篇
* 小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>