js导航条 二级滑动 模仿块级作用域
生活随笔
收集整理的這篇文章主要介紹了
js导航条 二级滑动 模仿块级作用域
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
for(var i = 1;i<7;i++){
//因為首級標題有6個，對每個首級標題添加mouseover和mouseout事件。
//這里用到塊級作用域(function(k){document.getElementById("p_"+k).addEventListener('mouseover',function(event){document.getElementById('p_1').className = 'm_li';document.getElementById('cp_1').className = 'aa';this.className = 'm_li_f';document.getElementById("cp_"+k).style.display="block";},false);document.getElementById("p_"+k).addEventListener('mouseout',function(event){this.className = 'm_li';document.getElementById("cp_"+k).style.display="none";},false);})(i); }
//如果沒有用到塊級作用域，改為 for(var i = 1;i<7;i++){document.getElementById("p_"+i).addEventListener('mouseover',function(event){ //此時i永遠是指7，這里的i永遠指for語句里面i最后取值。 document.getElementById('p_1').className = 'm_li'; document.getElementById('cp_1').className = 'aa'; this.className = 'm_li_f'; document.getElementById("cp_"+i).style.display="block"; },false); document.getElementById("p_"+i).addEventListener('mouseout',function(event){ this.className = 'm_li'; document.getElementById("cp_"+i).style.display="none"; // 此時i永遠是指7，這里的i永遠指for語句里面i最后取值。 },false)； }
//因為首級標題有6個，對每個首級標題添加mouseover和mouseout事件。
//這里用到塊級作用域(function(k){document.getElementById("p_"+k).addEventListener('mouseover',function(event){document.getElementById('p_1').className = 'm_li';document.getElementById('cp_1').className = 'aa';this.className = 'm_li_f';document.getElementById("cp_"+k).style.display="block";},false);document.getElementById("p_"+k).addEventListener('mouseout',function(event){this.className = 'm_li';document.getElementById("cp_"+k).style.display="none";},false);})(i); }
//如果沒有用到塊級作用域，改為 for(var i = 1;i<7;i++){document.getElementById("p_"+i).addEventListener('mouseover',function(event){ //此時i永遠是指7，這里的i永遠指for語句里面i最后取值。 document.getElementById('p_1').className = 'm_li'; document.getElementById('cp_1').className = 'aa'; this.className = 'm_li_f'; document.getElementById("cp_"+i).style.display="block"; },false); document.getElementById("p_"+i).addEventListener('mouseout',function(event){ this.className = 'm_li'; document.getElementById("cp_"+i).style.display="none"; // 此時i永遠是指7，這里的i永遠指for語句里面i最后取值。 },false)； }
下載地址：http://files.cnblogs.com/qduanlu/js%E5%AF%BC%E8%88%AA%E6%A0%8F.rar
<!DOCTYPE html> <html> <head><meta charset='utf-8'/><link rel="stylesheet" type='text/css' href='css/1.css'/> </head> <body><div id="menu"><ul id='menu_ul'><li class="m_line"><img src="images/line1.gif" /></li><li class="m_li_f" id="p_1"><a href="javaScript:void(0)">首頁</a></li><li class="m_line"><img src="images/line1.gif" /></li><li class="m_li" id="p_2"><a href="javaScript:void(0)">jquery 特效</a></li><li class="m_line"><img src="images/line1.gif" /></li><li class="m_li" id="p_3"><a href="javaScript:void(0)">javascript特效</a></li><li class="m_line"><img src="images/line1.gif" /></li><li class="m_li" id="p_4"><a href="javaScript:void(0)">flash特效</a></li><li class="m_line"><img src="images/line1.gif" /></li><li class="m_li" id="p_5"><a href="javaScript:void(0)">div+css教程</a></li><li class="m_line"><img src="images/line1.gif" /></li><li class="m_li" id="p_6"><a href="javaScript:void(0)">html5教程</a></li><li class="m_line"><img src="images/line1.gif" /></li></ul></div><div id="subbox"><ul id="smenu"><li style="padding-left:29px;" id="cp_1">jsfoot 教程</li><li style="padding-left:143px" class="aa" id="cp_2"><a href="javaScript:void(0)" title="jquery圖片特效" >jquery圖片特效</a>|??<a href="javaScript:void(0)" title="jquery導(dǎo)航菜單">jquery導(dǎo)航菜單</a>|??<a href="javaScript:void(0)" title="jquery選項卡特效">jquery選項卡</a></li><li style="padding-left:257px;" class="aa" id="cp_3"><a href="javaScript:void(0)" title="jquery圖片特效">jquery圖片特效</a>|??<a href="javaScript:void(0)" title="jquery導(dǎo)航菜單">jquery導(dǎo)航菜單</a>|??<a href="javaScript:void(0)" title="jquery選項卡特效">jquery選項卡</a></li><li style="padding-left:371px;" class="aa" id="cp_4"><a href="javaScript:void(0)" title="jquery圖片特效">jquery圖片特效</a>|??<a href="javaScript:void(0)" title="jquery導(dǎo)航菜單">jquery導(dǎo)航菜單</a>|??<a href="javaScript:void(0)" title="jquery選項卡特效">jquery選項卡</a></li><li style="padding-left:485px;" class="aa" id="cp_5"><a href="javaScript:void(0)" title="jquery圖片特效">jquery圖片特效</a>|??<a href="javaScript:void(0)" title="jquery導(dǎo)航菜單">jquery導(dǎo)航菜單</a>|??<a href="javaScript:void(0)" title="jquery選項卡特效">jquery選項卡</a></li><li style="padding-left:371px;" class="aa" id="cp_6"><a href="javaScript:void(0)" title="jquery圖片特效">jquery圖片特效</a>|??<a href="javaScript:void(0)" title="jquery導(dǎo)航菜單">jquery導(dǎo)航菜單</a>|??<a href="javaScript:void(0)" title="jquery選項卡特效">jquery選項卡</a></li></ul></div><script type="text/javascript" src="js/1.js"></script> <body> </html>*{margin : 0;padding : 0;list-style-type: none;text-decoration: none; } body{font-family:Tahoma, Verdana, Arial, sans-serif;font-size:12px;color:#333333; } a,img{border:0; } a:hover{color : #FF0000;text-decoration: none; } #menu{height : 32px;margin-top : 8px;background-color: #990000; } #menu ul{width : 778px;height : 32px;margin : 0 auto; } #menu ul>li{float : left; } .m_line{width:1px;height : 32px;line-height:32px; } .m_li_f{width:114px;height:32px;line-height:32px;text-align:center;padding-top:4px;font-weight:bold;background:url(../images/menu_bg.jpg);position:relative;margin:-4px -2px 0 -2px; } .m_li_f a{display:block;color:#FF0000;width:114px; }.m_li{width:114px;height:32px;line-height:32px;text-align:center;margin:0px -2px; } .m_li a{color:#FFFFFF;width:114px;display: block; } #subbox{height:32px;background-color:#F1F1F1; } #subbox #smenu{width:810px;margin:0px auto;height:32px; } #smenu li{line-height:32px;height:32px; } .aa{display: none; } .bb{display: block; }
轉(zhuǎn)載于:https://www.cnblogs.com/qduanlu/archive/2012/12/20/2826553.html
總結(jié)
以上是生活随笔為你收集整理的js导航条 二级滑动 模仿块级作用域的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： do语句转化为局部函数一例
- 下一篇： struts+swfupload实现批量