js鼠标滑过切换层效果代码

作者：黑客防线网安js教程网来源：黑客防线网安js教程网浏览次数：0

本篇关键词：js 代码

黑客防线网安网讯：
最近我们在完成一个项目过程中，客户提到了一个需求，关于js鼠标滑动切换层效果问题，主要用作网站建设和制作html标签的切换，从而增加网站的观赏和互动性。因在开发过程中应用了该样式，我们分享一下制作原理

最近我们在完成一个项目过程中，客户提到了一个需求，关于js鼠标滑动切换层效果问题，主要用作网站建设 www.hacker.com.cn和制作html标签的切换，从而增加网站的观赏和互动性。因在开发过程中应用了该样式，我们分享一下制作原理

<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()<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>& lt;img src="http://www.80boby.com/images/common/watermark.gif"></div> _fcksavedurl=""http://www.80boby.com/images/common/watermark.gif"></div>"
   <div id="JKDiv_1" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第二区<br><img src="http://www.80boby.com/logo.gif"></div>
   <div id="JKDiv_2" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第三区</div>
</div>
</body>
</html>

黑客防线网安服务器维护方案本篇连接：http://www.rongsen.com.cn/show-19313-1.html

网站维护教程更新时间:2012-12-15 15:18:45 【打印此页】【关闭】