无锡网站建设电话:0510-85851922  
位置->网站建设无锡网络公司博客鼠标滑过DIV切换代码 发布时间:(10.29) 本站网址:http://www.esw.net.cn 来源:易商科技 浏览次数:3410

鼠标滑过DIV切换代码

标签:网站建设

鼠标滑过DIV切换代码,今天做一个企业站时,用到了鼠标滑过显示出不同的DIV,之后去网上荡了一下,有很多代码用不了,这个还是不错的,很好用,这个代码显示的时3个DIV切换,如果想换成2个把for(i=0;i<=zDivCount;i++)换成for(i=0;i<zDivCount;i++)就可以了。还有红字标注的数字地方也要相应变动,多了就要增加 下如果好用记得留脚印哦。。

 

 

 

<html>
<head>
<title>鼠标滑过显示隐藏层</title>

<script language="JavaScript" type="text/javascript">
function ChangeDiv(divId,divName,zDivCount)
{
for(i=0;i<=zDivCount;i++)
{
document.getElementById(divName+i).style.display="none";
}
document.getElementById(divName+divId).style.display="block";
}

</script>
</head>

<body>
<span onMouseMove="JavaScript:ChangeDiv('0','JKDiv_',2)" style="cursor:hand;">内容一</span>
<span onMouseMove="JavaScript:ChangeDiv('1','JKDiv_',2)" style="cursor:hand;">内容二</span>
<span onMouseMove="JavaScript:ChangeDiv('2','JKDiv_',2)" style="cursor:hand;">内容三</span>


<div id="BigDIV" style="border:solid 1px #cccccc;width:460px;margin:10px;">
<div id="JKDiv_0" style="font-size:14px;margin:20px;color:#FF0000;">内容部分第一区<br><img src="baidu.jpg"></div>
<div id="JKDiv_1" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第二区<br><img src="logo.gif"></div>
<div id="JKDiv_2" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第三区</div>
</div>
</body>
</html>


版权所有@转载请注明:http://www.esw.net.cn/blogshow.asp?id=289

上一条: 下一条: 添加到百度搜藏 添加到百度搜藏