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