网页上经常出现鼠标经过,栏目的内容就改变了,现在网页里很流行这个,尤其是大的网站。先看下网易的。
function showDiv(obj,num,len)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
for(var id = 1;id<=len;id++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var ss=obj+id;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(id==num)...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
try...{document.getElementById(ss).style.display="block"}catch(e)...{};
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
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
>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<
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
>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
</
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)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
for(var i=0;i<data_ids.length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
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)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
if( currId1!=null)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
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