一款带渐入消融结果的菜单，JS+CSS代码

发布时间：2018-08-24 22:41:13 所属栏目：创业来源：站长网

导读：一款基于javascrip+css完成的、带渐入消融结果的菜单，行使鼠标点击后弹出，在菜单弹出的进程中，可以看到相同消融的渐显结果。此代码中也带有出格具体的注释，对付进修JS剧本的伴侣来说很是不错。演示： htmlheadstyle!--#iewrap{position:relative;heig

　　一款基于javascrip+css完成的、带渐入消融结果的菜单，行使鼠标点击后弹出，在菜单弹出的进程中，可以看到相同消融的渐显结果。此代码中也带有出格具体的注释，对付进修JS剧本的伴侣来说很是不错。

　　演示：

<html> <head> <style>  </style> <title>带渐入消融结果的结果</title> </head> <body> <span id="iewrap" onClick="dropit();event.cancelBubble=true;return false"> <a href="#"><b>点击这里</b></a> </span> <script language="<b>Java</b>Script1.2"> var enableeffect=true//这里节制是否打开渐入结果，可设为true或false var selection=new Array() //以下几条可按照必要改变 selection[0]='<font face="宋体"><a href="http://www.liehuo.net">猛火学院</a></font><br>'; selection[1]='<font face="宋体"><a href="http://www.163.com">网易163</a></font><br>'; selection[2]='<font face="宋体"><a href="http://www.sina.com.cn">新浪sina</a></font><br>'; //selection[3]='<font face="宋体"><a href="http://www.sohu.com.cn">搜狐</a></font><br>'; //可以像这样按照必要随意增减项目 function dropit(){//这个函数是焦点 if (document.all){ //检测赏识器兼容性 //调解弹出菜单层的位置 dropmenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX dropmenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18 if (dropmenu.style.visibility=="hidden"){ //假如菜单处于潜匿状态 if (enableeffect) //假如应承渐变结果 dropmenu.filters.revealTrans.apply() //先初始化渐变滤镜，冻结当前状态 dropmenu.style.visibility="visible" //将菜单层设为可见 if (enableeffect) //假如应承渐变结果 dropmenu.filters.revealTrans.play() //开始播放渐变结果 } else{ //假如菜单已经打开 hidemenu() //则将其潜匿 } } } function hidemenu(){ //这个函数用于潜匿菜单 if (enableeffect) //若打开了渐变结果 dropmenu.filters.revealTrans.stop() //则无论状态怎样，先遏制渐变滤镜的播放。 dropmenu.style.visibility="hidden" //将菜单地址的层设为不行见 } //以下初始化变乱捕捉措施 if (document.all) //假如是IE document.body.onclick=hidemenu //当点击页面任何其余部门时潜匿菜单 </script> <div id="dropmenu" style="position:absolute;left:0;top:0;layer-background-color:seashell; background-color:seashell;width:100;visibility:hidden;border:1px solid black;padding:0px"> <script language="JavaScript1.2"> //以下措施用于写入菜单的各项 if (document.all) dropmenu.style.padding='4px' //设定顶距 for (i=0;i<selection.length;i++) //取每一个菜单项 document.write(selection[i]) //写入当前层 </script> </div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如