window.onload里面的函数的顺序
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | <!doctype html><html><head> <meta charset="UTF-8"> <title>下拉菜单</title> <style type="text/css"> body,ul,li{ margin:0; padding:0; font-size:13px;} ul,li{list-style:none;} #divselect{width:186px; margin:80px auto; position:relative; z-index:10000;} #divselect cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal; padding-left:4px; padding-right:30px; border:1px solid #333333; background:url(xjt.png) no-repeat right center;} #divselect ul{width:184px;border:1px solid #333333; background-color:#ffffff; position:absolute; z-index:20000; margin-top:-1px; display:none;} #divselect ul li{height:24px; line-height:24px;} #divselect ul li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;} </style> <script type="text/javascript"> window.onload=function(){ var box=document.getElementById('divselect'), title=box.getElementsByTagName('cite')[0], menu=box.getElementsByTagName('ul')[0], as=box.getElementsByTagName('a'), index=-1; function clearback(){ for(var i=0;i<as.length;i++){ as[i].style.background='#fff'; } } // 点击三角时 title.onclick=function(event){ event=event||window.event; if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } menu.style.display='block'; } for(var i=0;i<as.length;i++){ as[i].onmouseover=function(){ this.style.background='#ccc'; index=this.getAttribute('selectid')-1; } as[i].onmouseout=function(){ this.style.background='#fff'; } as[i].onclick=function(){ title.innerHTML=this.innerHTML; menu.style.display='none'; index=-1; clearback(); } } document.onclick=function(){ menu.style.display='none'; index=-1; clearback(); } document.onkeyup=function(event){ // 滑过滑过、离开、点击每个选项时 event=event||window.event; if(event.keyCode==40){ index++; if(index>=as.length){index=0} clearback(); as[index].style.background='#ccc'; }else if(event.keyCode==38){ index--; if(index<0){index=as.length-1;} clearback(); as[index].style.background='#ccc'; }else if(event.keyCode==13&&index!=-1){ menu.style.display='none'; title.innerHTML=as[index].innerHTML; index=-1; clearback(); } } } // 点击页面空白处时 // 执行脚本 </script></head><body><div id="divselect"> <cite>请选择分类</cite> <ul> <li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li> <li><a href="javascript:;" selectid="2">.NET开发</a></li> <li><a href="javascript:;" selectid="3">PHP开发</a></li> <li><a href="javascript:;" selectid="4">Javascript开发</a></li> <li><a href="javascript:;" selectid="5">Java特效</a></li> </ul></div></body></html> |
