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 相关文章推荐
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 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遍历数组的几种方法
2012/03/22 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
JavaScript实现简单计算器
2020/03/19 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
python使用append合并两个数组的方法
2015/04/28 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
详解python的argpare和click模块小结
2019/03/31 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
python能否java成为主流语言吗
2020/06/22 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
毕业自我评价范文
2013/11/17 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
个人安全生产责任书
2014/07/28 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis