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 相关文章推荐
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
九种原生js动画效果
Nov 11 Javascript
js弹出对话框方式小结
Nov 17 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
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 MessagePack介绍
2013/10/06 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
element中的$confirm的使用
2020/04/26 Javascript
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
python的sorted用法详解
2019/06/25 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
python库matplotlib绘制坐标图
2019/10/18 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
英国足球店:UK Soccer Shop
2017/11/19 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
电子商务应届生自我鉴定
2014/01/13 职场文书
大学生校园创业计划书
2014/02/08 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
干部选拔任用方案
2014/05/26 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
电气自动化求职信
2014/06/24 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python