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


Posted in Javascript onMay 25, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
react redux入门示例
Apr 19 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 Javascript
JavaScript实现仿网易通行证表单验证
May 25 #Javascript
js+cookies实现悬浮购物车的方法
May 25 #Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 #Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 #Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 #Javascript
js实现鼠标划过给div加透明度的方法
May 25 #Javascript
javascript实现youku的视频代码自适应宽度
May 25 #Javascript
You might like
php适配器模式介绍
2012/08/14 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
python实现2048小游戏
2015/03/30 Python
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
StringBuilder和String的区别
2015/05/18 面试题
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
初一生物教学反思
2014/01/18 职场文书
项目采购员岗位职责
2014/04/15 职场文书
食品流通安全承诺书
2014/05/22 职场文书
服装设计师求职信
2014/06/04 职场文书
2014和解协议书范文
2014/09/15 职场文书
财务人员岗位职责
2015/02/03 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python