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

前端技术 2023/09/07 JavaScript

本文实例讲述了JS+DIV实现鼠标划过切换层效果的方法。分享给大家供大家参考。具体实现方法如下：

<html>
<head>
<title>DIV层切换</title>
<script language=\"JavaScript\" type=\"text/javascript\"> 
/*********************************************
功能:  通用DIV切换函数
参数:  divID --当前DIV的ID号；divName
 --要改变的这一组DIV的命名前缀；zDivCount --这一组DIV的个数-1
BY :  JetKing 2007.06 
*********************************************/
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(www.80Boby.Com)<br>
<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=\"images/common/watermark.gif\"></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>

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/20377

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案