一款带渐入溶解效果的菜单，JS+CSS代码

发布时间：2018-08-24 12:24:07 所属栏目：政策来源：站长网

导读：一款基于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>
提示：可修改后代码再运行!

（编辑：武汉站长网）

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