关于鼠标划过，改变栏目的内容的分析

 网页上经常出现鼠标经过，栏目的内容就改变了，现在网页里很流行这个，尤其是大的网站。先看下网易的。

function showDiv(obj,num,len)
... {
 for(var id = 1;id<=len;id++)
 ...{
  var ss=obj+id;
  if(id==num)...{
  try...{document.getElementById(ss).style.display="block"}catch(e)...{};
  }else...{
  try...{document.getElementById(ss).style.display="none"}catch(e)...{};
  }
 }  
}  

这个方法就可以实现这个功能。下面分析一下。

obj是id号，就是可以多用途的用，很有扩展性哦，(*^__^*) 嘻嘻……。

num是列的id号，就是同一个栏目有不同的几组数据，就是可以切换的号码。

len就是多少组数据要更换。

看用法：

< div   id ="dayphb1"  style ="display:block;" >
< div  class ="title tbg1" >
< h3 >< a  href ="http://news.163.com/rank/?l=9"  onmouseover ="javascript:showDiv('dayphb',1,4);" > 点击 </ a ></ h3 >< h4 >< a  href ="http://news.163.com/rank/?l=2"  onmouseover ="javascript:showDiv('dayphb',2,4);" > 评论 </ a ></ h4 >< h5 >< a  href ="http://pic.news.163.com/dece.html"  onmouseover ="javascript:showDiv('dayphb',3,4);" > 图片 </ a ></ h5 >< h6 >< a  href ="http://news.163.com/special/000129LA/news_wajue.html"  onmouseover ="javascript:showDiv('dayphb',4,4);" > 顶新闻 </ a ></ h6 >
</ div >
< div  class ="blank9 clear" ></ div >
< div  class ="content" >
< ul >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no1.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0928/04/3PF0LEU400011229.html" > 河北5旬男子将一家5口残杀后猥亵女孩 </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no2.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0928/04/3PEVN5KQ0001121M.html" > 英国85岁老太含冤被囚70年震惊全国(  </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no3.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0928/01/3PEL7HO800011229.html" > 重庆小伙骑车进藏 逃过6条藏獒千米狂 </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no4.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0928/05/3PF415VB00011229.html" > 剧组公园拍枪战场面 吓晕旁边女游客( </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no5.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0928/05/3PF11VB50001124J.html" > 北大被评为最有影响力大学 清华排名  </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no6.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0927/15/3PDIQ8S40001121M.html" > 布什安理会开会时再次向赖斯传纸条(  </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no7.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0928/02/3PEPJFE00001121M.html" > 南极融冰可能释放远古超级病毒(图) </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no8.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0928/00/3PEG4T1T0001124J.html" > 购买第二套住房贷款首付款比例不得低 </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no9.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0928/02/3PEOPFDT0001121M.html" > 美国会通过决议建议伊拉克一分为三 </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no10.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0927/08/3PCRH4360001125G.html" > 四川民警夜间持枪执勤 抓获涉嫌卖淫  </ a ></ li >
</ ul >
</ div >
</ div >

紧接着就是

< div   id ="dayphb2"  style ="display:none;" >
< div  class ="title tbg2" >
< h3 >< a  href ="http://news.163.com/rank/"  onmouseover ="javascript:showDiv('dayphb',1,4);" > 点击 </ a ></ h3 >< h4 >< a  href ="http://news.163.com/rank/?l=2"  onmouseover ="javascript:showDiv('dayphb',2,4);" > 评论 </ a ></ h4 >< h5 >< a  href ="http://pic.news.163.com/dece.html"  onmouseover ="javascript:showDiv('dayphb',3,4);" > 图片 </ a ></ h5 >< h6 >< a  href ="http://news.163.com/special/000129LA/news_wajue.html"  onmouseover ="javascript:showDiv('dayphb',4,4);" > 顶新闻 </ a ></ h6 >
</ div >
< div  class ="blank9 clear" ></ div >
< div  class ="content" >
< ul >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no1.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0927/13/3PDB65GM0001121M.html" > 透明国际将缅甸列为全球最腐败国家 </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no2.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0927/15/3PDIQ8S40001121M.html" > 布什安理会开会时再次向赖斯传纸条( </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no3.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0927/14/3PDEOVJL0001121M.html" > 英国4岁女孩放飞气球飘到中国广州( </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no4.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0927/11/3PD3FD3Q00011229.html" > 台湾母子3人因贫病交迫中秋当晚烧炭 </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no5.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0927/10/3PD0DJDF00011229.html" > 12岁女孩裸死学校公厕粪池 疑遭奸 </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no6.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0928/02/3PEOPFDT0001121M.html" > 美国会通过决议建议伊拉克一分为三 </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no7.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0927/16/3PDME54V0001124J.html" > 广东阳春境内火车撞汽车 火车司机死 </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no8.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0928/04/3PF0LEU400011229.html" > 河北5旬男子将一家5口残杀后猥亵女 </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no9.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0927/16/3PDL7KF600011229.html" > 香港美女抗癌坚强乐观 60万人次看 </ a ></ li >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no10.gif"  width ="17"  height ="11"   />   < a  href ="http://news.163.com/07/0928/05/3PF11VB50001124J.html" > 北大被评为最有影响力大学 清华排名 </ a ></ li >
</ ul >
</ div >
</ div >

< div   id ="dayphb3"  style ="display:none;" >
< div  class ="title tbg3" >
< h3 >< a  href ="http://news.163.com/rank/"  onmouseover ="javascript:showDiv('dayphb',1,4);" > 点击 </ a ></ h3 >< h4 >< a  href ="http://news.163.com/rank/?l=2"  onmouseover ="javascript:showDiv('dayphb',2,4);" > 评论 </ a ></ h4 >< h5 >< a  href ="http://pic.news.163.com/dece.html"  onmouseover ="javascript:showDiv('dayphb',3,4);" > 图片 </ a ></ h5 >< h6 >< a  href ="http://news.163.com/special/000129LA/news_wajue.html"  onmouseover ="javascript:showDiv('dayphb',4,4);" > 顶新闻 </ a ></ h6 >
</ div >
< div  class ="blank9 clear" ></ div >



< div  class ="content" >
< ul >
< li >< img  src ="http://cimg2.163.com/cnews/img07/no1.gif"  width ="17"  height ="11" />< a  href =http://news.163.com/photo/00AP0001/2584.html >  开心字典海选全国高校37名校花 </ a ></ li >< li >< img  src ="http://cimg2.163.com/cnews/img07/no2.gif"  width ="17"  height ="11" />< a  href =http://news.163.com/photo/05UR0001/2300.html >  校花10强选手 </ a ></ li >< li >< img  src ="http://cimg2.163.com/cnews/img07/no3.gif"  width ="17"  height ="11" />< a  href =http://news.163.com/photo/00AP0001/2993.html >  各地豪华办公楼 </ a ></ li >< li >< img  src ="http://cimg2.163.com/cnews/img07/no4.gif"  width ="17"  height ="11" />< a  href =http://news.163.com/photo/00AP0001/2939.html >  西方人眼中的中国十大美女 </ a ></ li >< li >< img  src ="http://cimg2.163.com/cnews/img07/no5.gif"  width ="17"  height ="11" />< a  href =http://news.163.com/photo/04FH0001/3430.html >  七个版本的小龙女大比拼 </ a ></ li >< li >< img  src ="http://cimg2.163.com/cnews/img07/no6.gif"  width ="17"  height ="11" />< a  href =http://news.163.com/photo/00AP0001/3526.html >  山东美女明星 </ a ></ li >< li >< img  src ="http://cimg2.163.com/cnews/img07/no7.gif"  width ="17"  height ="11" />< a  href =http://news.163.com/photo/06C10001/2738.html >  BBS上流传的香港各学校校花 </ a ></ li >< li >< img  src ="http://cimg2.163.com/cnews/img07/no8.gif"  width ="17"  height ="11" />< a  href =http://news.163.com/photo/00AO0001/3507.html >  全球最贵10大收藏品 </ a ></ li >< li >< img  src ="http://cimg2.163.com/cnews/img07/no9.gif"  width ="17"  height ="11" />< a  href =http://news.163.com/photo/04FL0001/3341.html >  日本传说中的20个女鬼 </ a ></ li >< li >< img  src ="http://cimg2.163.com/cnews/img07/no10.gif"  width ="17"  height ="11" />< a  href =http://news.163.com/photo/00AN0001/3437.html >  新疆举行消防演习 </ a ></ li >
</ ul ></ div >

    
    

</ div >

请注意，当想让哪个首先展示的话，style="display:block;" 就可以了。

继续分析，还有一种方法。

  var  data_ids =   new  Array();                     
data_ids[ 0 ] = " 01 " ;
data_ids[ 1 ] = " 02 " ;
data_ids[ 2 ] = " 03 " ;
data_ids[ 3 ] = " 04 " ;
data_ids[ 4 ] = " 05 " ;

function  setclass(id)
... {
    for(var i=0;i<data_ids.length;i++)
    ...{
        document.getElementById("li"+data_ids[i]).className = "";
    }
    document.getElementById("li"+id).className="on";
}

页面传递

  < ul  class ="book_r_b4_button"  id ="menu_class" >
                             < li  class ="on"  id ="li01" >< a  href ="01.01.html"  onmouseover ="javascript:setclass(01);"   >
                                小说 </ a ></ li >
                             < li  id ="li02" >< a  href ="01.02.html"  onmouseover ="javascript:setclass(02);"   >
                                少儿 </ a ></ li >
                             < li  id ="li03" >< a  href ="01.03.html"  onmouseover ="javascript:setclass(03);" >
                                管理 </ a ></ li >
                             < li  id ="li04" >< a  href ="01.04.html"  onmouseover ="javascript:setclass(04);" >
                                文学 </ a ></ li >
                             < li  id ="li05" >< a  href ="01.05.html"  onmouseover ="javascript:setclass(05);" >
                                外语 </ a ></ li >
                         </ ul >

鼠标划过可以改变class值来达到这个效果setclass_name这个函数里加入显示的内容的代码，就可以实现。不过网易的实现起来比较直接了当，没有绕弯子。

下面进一步说一下，鼠标划过的另外一个效果

就是刚开始显示都是题目，但是鼠标划过可以看到内容，这个也挺流行，学习下。

var  currId1  =   ' NewProduct1 ' ;
function  changTop1(newId)
... {
    if( currId1!=null)
                    ...{
      document.getElementById(currId1).style.display="none";
      document.getElementById(currId1+'_t').style.display="block";
    }    
    document.getElementById(newId).style.display="block";
    document.getElementById(newId+'_t').style.display="none";
    currId1 = newId;
}

< div  id ="NewProduct1_t"  onmouseover ="javascript:changTop1('NewProduct1);" >
                                     < h3  class ="second" >
                                        题目1
                                     </ h3 >
                                 </ div >   
                                 < div  class ="book_r_hot"   id ="NewProduct1"  style ="display:none" >
                                  < div  class ="first" >
                               内容1
                             </ div >
                         </ div >
< div  id ="NewProduct2_t"  onmouseover ="javascript:changTop1('NewProduct2');" >
                                     < h3  class ="second" >
                                        题目2
                                     </ h3 >
                                 </ div >   
                                 < div  class ="book_r_hot"   id ="NewProduct2"  style ="display:none" >
                                  < div  class ="first" >
                               内容2
                             </ div >
                         </ div >

大家都想鼠标划过要产生炫炫的感觉哦，多多学习才是，呵呵。Prosurfer原创哦，欢迎转载，大家共同进步。

http://blog.csdn.net/prosurfer