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 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
微信小程序解除10个请求并发限制
Dec 18 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
js基础语法与maven项目配置教程案例
Jul 15 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
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
js获取页面description的方法
2015/05/21 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
flask中的wtforms使用方法
2018/07/21 Python
pytorch 修改预训练model实例
2020/01/18 Python
NumPy排序的实现
2020/01/21 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
互动出版网:专业书籍
2017/03/21 全球购物
庆元旦迎新年广播稿
2014/02/18 职场文书
《太阳》教学反思
2014/02/21 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
大学生求职自荐信
2015/03/24 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
同学会感言
2015/07/30 职场文书
妇产科护理心得体会
2016/01/22 职场文书
python实现简单的名片管理系统
2021/04/26 Python
Golang bufio详细讲解
2022/04/21 Golang