继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JS+DIV实现鼠标划过切换层效果

远看寒山石径斜
关注TA
已关注
手记 268
粉丝 25
获赞 149

         IE、FireFox下测试通过,不过有两个问题望有高手指点:
1、FireFox下鼠标移上去变换为手形鼠标样式效果失效(IE支持,而FireFox不支持,需要在JS中写鼠标的样式吗?)
2、这个函数的最后一个参数zDivCount是否可以不要?而通过JavaScript来取得诸如ID为:JKDiv_1、JKDiv_2、JKDiv_3…… 这样的数组,然后循环这个数据?如果可以的话那么应该用什么方法取得?(因为不知道,我这里就用了传参的方式来解决

<html>
<head>
<title>DIV层切换</title>

<script language="JavaScript" type="text/javascript">
/*********************************************
功能:    通用DIV切换函数
参数:    divID --当前DIV的ID号;divName  --要改变的这一组DIV的命名前缀;zDivCount --这一组DIV的个数-1
BY  :   JetKing 2007.06
[url]http://www.80Boby.Com[/url]
*********************************************/
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>
层切换示例:<br>By:JetKing([url]www.80Boby.Com[/url])<br>
<span onMouseMove="JavaScript:ChangeDiv('0','JKDiv_',2)" >内容一</span>
<span onMouseMove="JavaScript:ChangeDiv('1','JKDiv_',2)" >内容二</span>
<span onMouseMove="JavaScript:ChangeDiv('2','JKDiv_',2)" >内容三</span>


<div id="BigDIV" >
    <div id="JKDiv_0" >内容部分第一区<br><img src="http://www.80boby.com/images/common/watermark.gif"></div>
    <div id="JKDiv_1" >内容部分第二区<br><img src="http://www.80boby.com/logo.gif"></div>
    <div id="JKDiv_2" >内容部分第三区</div>
</div>
</body>
</html>

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP