Javascript简易动态下拉导航栏 js的导航栏效果很炫，当然纯CSS同样可以制作下拉菜单，下面开始讲解导航栏的结构代码，创建一个无序列表，列表下面有三个li，li里面有不同数目的子项目。简单易懂。
<body> <ul id="ul1"> <li>首页 <div> 武汉<br /> 长沙<br /> 上海<br /> 杭州<br /> 成都<br /> 杭州<br /> 成都<br /> </div> </li> <li>客户端 <div> 武汉<br /> 长沙<br /> 上海<br /> 杭州<br /> 成都<br /> </div> </li> <li>关于我们 <div> 武汉<br /> 长沙<br /> 杭州<br /> 成都<br /> </div> </li> </ul> </body>
下面是CSS代码使用通配符来重置所有的不同浏览器的默认样式，当然了，不推荐这种方法，只是为了方便，一般的重置样式都会有专门的CSS文件。这里主要是把li浮动，然后相对定位，li里面的div绝对定位，然后宽度100%自适应。
1 <style> 2 *{margin:0;padding:0;} 3 #ul1{width:300px;height:20px;background:#006600;border:1px solid #3300FF;list-style:none;color:#CCCCCC;} 4 #ul1 li{width:100px;height:20px;float:left;position:relative;} 5 #ul1 li div{height:0;position:absolute;top:20px;overflow:hidden;filter:alpha(opacity:0);opacity:0;background:#000099;width:100%;} 6 </style>
下面是js的代码，当然了，需要引入运动框架，下面附上运动框架，不理解的可以看这里。
1 // JavaScript Document 2 /** 3 * @author miaov 4 */ 5 function getStyle(obj, attr) 6 { 7 if(obj.currentStyle) 8 { 9 return obj.currentStyle[attr]; 10 } 11 else 12 { 13 return getComputedStyle(obj, false)[attr]; 14 } 15 } 16 17 function startMove(obj, json, fn) 18 { 19 clearInterval(obj.timer); 20 obj.timer=setInterval(function (){//如果有多个运动一起行动，那么会因为值的不同而停止后面的运动，最先到达目标的运动停止，其他的运动也会相应的停止，从而影响最后的结果不是预想的那样。 21 var bStop=true; //这一次运动就结束了——所有的值都到达了 22 for(var attr in json) 23 { 24 //1.取当前的值 25 var iCur=0; 26 27 if(attr=='opacity') 28 { 29 iCur=parseInt(parseFloat(getStyle(obj, attr))*100); 30 } 31 else 32 { 33 iCur=parseInt(getStyle(obj, attr)); 34 } 35 36 //2.算速度 37 var iSpeed=(json[attr]-iCur)/8; 38 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 39 40 //3.检测停止 41 if(iCur!=json[attr]) 42 { 43 bStop=false; 44 } 45 46 if(attr=='opacity') 47 { 48 obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')'; 49 obj.style.opacity=(iCur+iSpeed)/100; 50 } 51 else 52 { 53 obj.style[attr]=iCur+iSpeed+'px'; 54 } 55 } 56 57 if(bStop) 58 { 59 clearInterval(obj.timer); 60 61 if(fn) 62 { 63 fn(); 64 } 65 } 66 }, 30) 67 }
实例中的js-----首先获取元素，this用来获取当前的li,同时因为每个li下面只有一个div，所以后面为[0],也就是第一个div的意思。需要注意的是，首先div的高度自适应，然后把变量iHeight的值赋给他，然后再次执行高度为0。整个过程通过鼠标移入事件和鼠标移除事件来实现。
1 <script>
2 window.onload=function(){
3 var oUl=document.getElementById('ul1');
4 var oLi=oUl.getElementsByTagName('li');
5 var i=0;
6 for(i=0;i<oLi.length;i++){
7 oLi[i].onmouseover=function(){
8 var oDiv=this.getElementsByTagName('div')[0];//每个li下面只有一个div
9 oDiv.style.height='auto';//高度自适应
10 var iHeight=oDiv.offsetHeight;//offsetHeight就是元素的高度
11 oDiv.style.height=0;//从零开始运动
12
13 startMove(oDiv, {opacity: 100, height:iHeight});}
14
15
16 oLi[i].onmouseout=function(){
17 var oDiv=this.getElementsByTagName('div')[0];
18 startMove(oDiv, {opacity:0, height:0});
19 };
20 }
21
22 }
23 </script>
附上效果图
Js动画方块
整个效果的代码。不能通过使用绝对定位来实现每一个li的定位，因为li的数量并不确定，定位的top，left的在不断地变化，给每一个li左浮动。因为要获取top和left值，所以通过offsetleft和offsettop来获取，并且对li进行动态的绝对定位，同时margin值为0，这是为了避免margin值的累加。鼠标移入事件---当鼠标移入的时候，增加宽度和高度，使用负边距，同理，当鼠标移出的时候减少宽度和高度，负边距设置为0即可。其次，需要特别注意的是，当你把鼠标移动到li上面的时候，后面的li会覆盖前面的div，为了解决这种问题，首先定义一个变量，iMinZindex=2;然后，设置this.style.zIndex=iMinZindex++;每次zindex都在累加，但是没有影响，zindex的最大值是2的31次方，没有人会那么无聊不停地点上一个东西几十年。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 *{margin:0;padding:0;} 8 #ul1{width:324px;position:relative;margin:0 auto;} 9 #ul1 li{list-style:none;border:4px solid #666666;float:left;width:80px;height:80px;margin:10px;background:#CCCCCC;} 10 </style> 11 <script src="完美运动框架.js"></script> 12 <script> 13 window.onload=function(){ 14 var oUl=document.getElementById('ul1'); 15 var aLi=oUl.getElementsByTagName('li'); 16 var i=0; 17 var iMinZindex=2; 18 19 for(i=0;i<aLi.length;i++){ 20 aLi[i].style.left=aLi[i].offsetLeft+'px'; 21 aLi[i].style.top=aLi[i].offsetTop+'px'; //offsetTop已经包括了margin值 22 } 23 for(i=0;i<aLi.length;i++){ 24 aLi[i].style.position='absolute'; 25 aLi[i].style.margin='0'; 26 } 27 28 29 for(i=0;i<aLi.length;i++){ 30 aLi[i].onmouseover=function () 31 { 32 this.style.zIndex=iMinZindex++; 33 startMove(this, { 160, height: 160, marginLeft: -40, marginTop: -40}); 34 }; 35 36 aLi[i].onmouseout=function () 37 { 38 startMove(this, { 80, height:80, marginLeft: 0, marginTop: 0}); 39 }; 40 }; 41 42 }; 43 </script> 44 </head> 45 46 <body> 47 <ul id="ul1"> 48 <li></li> 49 <li></li> 50 <li></li> 51 <li></li> 52 <li></li> 53 <li></li> 54 <li></li> 55 <li></li> 56 <li></li> 57 <li></li> 58 <li></li> 59 </ul> 60 </body> 61 </html>
运行效果图
