JavaScript实现鼠标点击后层展开效果的方法
更新时间：2015年05月13日 09:19:18 投稿：shichen2014
这篇文章主要介绍了JavaScript实现鼠标点击后层展开效果的方法,可实现点击文字缓慢展开层的效果,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
这篇文章主要介绍了CocosCreator MVC架构，同学们在制作游戏过程中，尽量使用一些架构，会避免很多问题2021-04-04
每种语言都有它特别的地方，对于JavaScript来说，使用var就可以声明任意类型的变量，这门脚本语言看起来很简单，然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节，与大家分享。2011-01-01
当用户进行登录页后，直接从localStorage中把用户名和密码取出来，填充到表单里，对用户体验来说十分不错，今天通过本文给大家分享JS在浏览器中对用户名和密码进行存储,需要的朋友可以参考下2023-06-06
js超时调用setTimeout和间歇调用setInterval实例分析
这篇文章主要介绍了js超时调用setTimeout和间歇调用setInterval,以实例形式对比分析了setTimeout与setInterval的具体使用技巧,非常具有实用价值,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了微信小程序的运行机制与安全机制解决方案，接触小程序有一段时间了，总得来说小程序开发门槛比较低，但其中基本的运行机制和原理还是要懂的2023-02-02
本文为大家介绍下前台js调用后台方法，下面有个不错的示例，喜欢的朋友可以参考下2013-12-12
这篇文章主要为大家详细介绍了Boostrap popover用法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
下面通过本文给大家详细介绍javascript中的语句后面的分号问题，本文给大家介绍的非常详细，需要的朋友参考下吧2017-12-12
本文主要介绍了js限制文本框只可以输入数字的实例代码，可复制直接调用函数实现其功能。需要的朋友可以看下2016-12-12
这篇文章主要为大家详细介绍了小程序实现滑动块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
最新评论