JavaScript实现鼠标点击后层展开效果的方法


Posted in Javascript onMay 13, 2015

本文实例讲述了JavaScript实现鼠标点击后层展开效果的方法。分享给大家供大家参考。具体分析如下:

这段JavaScript代码可实现鼠标点击后层展开的功能,代码稍嫌复杂,重在学习研究,有兴趣的可以修改简化一下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>层展开折叠</title>
</head>
<body>
<style type="text/css">
DIV.clTopMenu{
 position:absolute;
 width:101;
 height:150;
 clip:rect(0,101,14,0);
 visibility:hidden;
 z-index:31;
 layer-background-color:#EEEEEE;
 background-color:#00CCFF
}
DIV.clTopMenuBottom{
 position:absolute;
 width:101;
 height:3;
 clip:rect(0,101,3,0);
 top:11;
 layer-background-color:#CECFCE;
 background-color:#000099;
 z-index:2
}
DIV.clTopMenuText{
 position:absolute;
 width:91;
 left:5;
 top:15;
 font-family:"Arial", "Helvetica", "sans-serif";
 font-size:9pt;
 background-color:#EEEEEE;
 z-index:1;
 color: #000000
} 
a:link {
 color: #000000;
 text-decoration: none
}
</style>
<script language="JavaScript" type="text/javascript">
function lib_bwcheck(){ //Browsercheck (needed)
 this.ver=navigator.appVersion
 this.agent=navigator.userAgent
 this.dom=document.getElementById?1:0
 this.opera5=this.agent.indexOf("Opera 5")>-1
 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
 this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
 this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
 this.ie=this.ie4||this.ie5||this.ie6
 this.mac=this.agent.indexOf("Mac")>-1
 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
 this.ns4=(document.layers && !this.dom)?1:0;
 this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
 return this
}
var bw=new lib_bwcheck()
nPlace=0
var nNumberOfMenus=2
var nMwidth=101
var nPxbetween=20
var nFromleft=10 
var nFromtop=20
var nBgcolor='#CECFCE' 
var nBgcolorchangeto='#6380BC' 
var nImageheight=11 
function makeNewsMenu(obj,nest){
 nest=(!nest) ? "":'document.'+nest+'.'     
   this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;  
 this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;   
 this.scrollHeight=bw.ns4?this.css.document.height:this.evnt.offsetHeight
 this.moveIt=b_moveIt;this.bgChange=b_bgChange;
 this.slideUp=b_slideUp; this.slideDown=b_slideDown;
 this.clipTo=b_clipTo;
  this.obj = obj + "Object";  eval(this.obj + "=this")  
}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function b_bgChange(color){if(bw.dom || bw.ie4) this.css.backgroundColor=color; else this.css.bgColor=color}
function b_clipTo(t,r,b,l){
 if(bw.ns4){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l
 }else this.css.clip="rect("+t+","+r+","+b+","+l+")";
}
function b_slideUp(ystop,moveby,speed,fn,wh){
 if(!this.slideactive){
  if(this.y>ystop){
   this.moveIt(this.x,this.y-5); eval(wh)
   setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
  }else{
   this.slideactive=false; this.moveIt(0,ystop); eval(fn)
  }
 }
}
function b_slideDown(ystop,moveby,speed,fn,wh){
 if(!this.slideactive){
  if(this.y<ystop){
   this.moveIt(this.x,this.y+5); eval(wh)
   setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
  }else{
   this.slideactive=false; this.moveIt(0,ystop); eval(fn)
  }
 }
}
function newsMenuInit(){
 oTopMenu=new Array()
 zindex=10
 for(i=0;i<=nNumberOfMenus;i++){
  oTopMenu[i]=new Array()
  oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i)
  oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)
  oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)
  oTopMenu[i][1].moveIt(0,nImageheight)
  oTopMenu[i][0].clipTo(0,nMwidth,nImageheight+3,0)
  if(!nPlace) oTopMenu[i][0].moveIt(i*nMwidth+nFromleft+(i*nPxbetween),nFromtop)
  else{
   oTopMenu[i][0].moveIt(nFromleft,i*nImageheight+nFromtop+(i*nPxbetween))
   oTopMenu[i][0].css.zIndex=zindex--
  }
  oTopMenu[i][0].css.visibility="visible"
 }
}
function topMenu(num){
 if(oTopMenu[num][1].y==nImageheight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)')
 else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(nImageheight,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)')
}
function menuOver(num){oTopMenu[num][1].bgChange(nBgcolorchangeto)}
function menuOut(num){oTopMenu[num][1].bgChange(nBgcolor)}
onload=newsMenuInit;
</script>
<div id="divTopMenu0" class="clTopMenu" align="center" style="height: 170; left: 20; top: 20"><span class="css3"><a href="#" onMouseOver="menuOver(0)" onMouseOut="menuOut(0)" onClick="topMenu(0); if(bw.dom || bw.ie4)this.blur(); return false">点击展开</a>
 </span> 
 <div id="divTopMenuText0" class="clTopMenuText">
 <span class="css3">
 鼠标点击后层展开JavaScript鼠标点击后层展开JavaScript。
 </span>
 </div>
 <div id="divTopMenuBottom0" class="clTopMenuBottom" style="top: 11; height: 10"></div>
</div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
switchery按钮的使用方法
Dec 18 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
node.js 微信开发之定时获取access_token
Feb 07 Javascript
浅谈javascript中的闭包
May 13 #Javascript
jQuery构造函数init参数分析续
May 13 #Javascript
jQuery构造函数init参数分析
May 13 #Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 #Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 #Javascript
js实现带按钮的上下滚动效果
May 12 #Javascript
js验证上传图片的方法
May 12 #Javascript
You might like
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
php获取微信openid方法总结
2019/10/10 PHP
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
在node中如何使用 ES6
2017/04/22 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
介绍一下#error预处理
2015/09/25 面试题
抽象类和接口的区别
2012/09/19 面试题
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
手机被没收的检讨书
2014/10/04 职场文书
客户经理岗位职责
2015/01/31 职场文书
2015年商场工作总结
2015/04/27 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android