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 相关文章推荐
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
Vue实现双向数据绑定
May 03 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
详解JavaScript自定义函数
Jul 29 Javascript
原生js实现购物车
Sep 23 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
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
javascript静态的url如何传递
2007/05/03 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
Python中使用partial改变方法默认参数实例
2015/04/28 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
numpy返回array中元素的index方法
2018/06/27 Python
python实现字符串和字典的转换
2018/09/29 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
python中二分查找法的实现方法
2020/12/06 Python
分公司总经理岗位职责
2014/08/03 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python