首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网络编程
JavaScript
正文
基于jQuery的弹出隐藏层的窗口特效
所属分类：
网络编程
/
JavaScript
阅读数： 1757
收藏 0
赞 0
分享
运行效果后，点击菜单，会弹出一个注册表单，类似于很多论坛的用户注册及登录功能那样，目前还是挺流行的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>弹出层</title> </head> <body> <!--头部结束--> <div class="pro_list"> <div class="menu"> <input name="button" src="https://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show" class="mess_show"> </div> <div class="menu"> <input name="button" src="https://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show2" class="mess_show"> </dt> </div> <div class="menu"> <input name="button" src="https://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show3" class="mess_show"> </div> <div class="menu"> <input name="button" src="https://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show4" class="mess_show"> <div class="menu"> <input name="button" src="https://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show5" class="mess_show"> </div> <div class="menu"> <input name="button" src="https://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show6" class="mess_show"> </div> <div class="menu"> <input name="button" src="https://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show7" class="mess_show"> </div> <div class="menu"> <input name="button" src="https://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show8" class="mess_show"> </div> <div class="menu"> <input name="button" src="https://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show9" class="mess_show"> </div> </div> </div> <div class="div_clear"></div> <!--列表结束--> <div class="message_box" id="message"> <table width="550" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="5" height="89"><img src="images/message_1.jpg" width="550" height="89" /></td> </tr> <tr> <td width="12"> </td> <td width="37" height="27">姓名：</td> <td width="222"><input name="names" class="mess_input" /></td> <td colspan="2"><span class="bb"><span style="color:#FF0000">* </span>您的真实姓名</span></td> </tr> <tr> <td> </td> <td height="27">电话：</td> <td><input name="names" class="mess_input" /></td> <td colspan="2"><span class="bb"><span style="color:#FF0000">* </span>请填写您的电话号码</span></td> </tr> <tr> <td> </td> <td height="27">地址：</td> <td><input name="names" class="mess_input" /></td> <td colspan="2"><span class="bb"><span style="color:#FF0000">* </span>请填写您的地址,以保证资料邮递</span></td> </tr> <tr> <td> </td> <td height="27">邮箱：</td> <td><input name="names" class="mess_input" /></td> <td colspan="2"><span class="bb"><span style="color:#FF0000">* </span>请填写电子邮箱</span></td> </tr> <tr> <td> </td> <td colspan="4"><table width="98%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="37" valign="middle">内容</td> <td width="224"><textarea name="text_content" class="dd" id="text_content" onmouseover=menuControl() cols="20" rows="10" style="overflow-y:hidden"></textarea></td> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr> <td><div style="POSITION: relative;" id=menu_1> <table border=0 cellspacing=0 cellpadding=0 width=180 height=164> <tbody> <tr> <td height=167 valign=top background=images/liuyan_08.png align=right style="padding-left:15px;"><table border=0 cellspacing=0 cellpadding=0 width=217> <tbody> <tr> <td height=30 valign=center width=210 align=left style="border-bottom:1px solid #f1aba7;"><font color=#c02d2c><strong>填写留言或选择快捷留言</strong></font></td> </tr> <tr> <td class=ly_td-bg height=26 width=210 align=left><a onclick="sel('现在就想加入，请给我预留名额。')" href="javascript:;"><font color=#f05151>现在就想加入，请给我预留名额。</font></a></td> </tr> <tr> <td class=ly_td-bg height=26 width=210 align=left><a onclick="sel('对这个项目很感兴趣，尽快寄资料')" href="javascript:;"><font color=#f05151>对这个项目很感兴趣，尽快寄资料</font></a></td> </tr> <tr> <td height=26 width=180 align=left><a onclick="sel('请问我这个地方有加入者了吗？ ')" href="javascript:;"><font color=#f05151>请问我这个地方有加入者了吗？ </font></a></td> </tr> </tbody> </table></td> </tr> </tbody> </table> </div> <DIV style="POSITION: relative; DISPLAY: none;" id=menu_2> <TABLE border=0 cellSpacing=0 cellPadding=0 width=230 height=164> <TBODY> <TR> <TD height=167 vAlign=top background=images/liuyan_08.png align=right style="padding-left:15px;"><TABLE border=0 cellSpacing=0 cellPadding=0 width=217> <TBODY> <TR> <TD height=30 vAlign=center width=210 align=left><FONT color=#c02d2c><STRONG>填写留言或选择快捷留言</STRONG></TD> </TR> <TR> <TD class=ly_td-bg height=26 width=210 align=left><A onClick="sel('我想加入，请来电话告诉具体细节')" href="javascript:;"><FONT color=#f05151>我想加入，请来电话告诉具体细节</A></TD> </TR> <TR> <TD class=ly_td-bg height=26 width=210 align=left><A onclick="sel('想找一个合适的项目做，请来电话')" href="javascript:;"><FONT color=#f05151>想找一个合适的项目做，请来电话</A></TD> </TR> <TR> <TD height=26 width=180 align=left><A onclick="sel('有兴趣开店，请寄资料或打电话。')" href="javascript:;"><FONT color=#f05151>有兴趣开店，请寄资料或打电话。</A></TD> </TR> </TBODY> </TABLE></TD> </TR> </TBODY> </TABLE> </DIV> <!--sel end--> <!--sel start--> <DIV style="POSITION: relative; DISPLAY: none; " id=menu_3> <TABLE border=0 cellSpacing=0 cellPadding=0 width=230 height=164> <TBODY> <TR> <TD height=167 vAlign=top background=images/liuyan_08.png align=right style="padding-left:15px;"><TABLE border=0 cellSpacing=0 cellPadding=0 width=217> <TBODY> <TR> <TD height=30 vAlign=center width=210 align=left><FONT color=#c02d2c><STRONG>填写留言或选择快捷留言</STRONG></TD> </TR> <TR> <TD class=ly_td-bg height=26 width=210 align=left><A onclick="sel('详细研究过您们的项目，想加入。')" href="javascript:;"><FONT color=#f05151>详细研究过您们的项目，想加入。</A></TD> </TR> <TR> <TD class=ly_td-bg height=26 width=210 align=left><A onClick="sel('加入你们后，还会提供哪些服务？')" href="javascript:;"><FONT color=#f05151>加入你们后，还会提供哪些服务？</A></TD> </TR> <TR> <TD height=26 width=210 align=left><A onclick="sel('想去你们公司考察，请给我来电话')" href="javascript:;"><FONT color=#f05151>想去你们公司考察，请给我来电话</A></TD> </TR> </TBODY> </TABLE></TD> </TR> </TBODY> </TABLE> </DIV></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td> </td> <td> </td> <td align="right"><input src="images/mess_menu1.jpg" type="image"></td> <td width="161" height="50" align="center"><input name="button" src="images/mess_menu2.jpg" type="image" id="button_2"></td> <td width="118"> </td> </tr> </table> </div> </body> </html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
更多精彩内容
其他人还在看
jQuery LigerUI 使用教程表格篇(1)
ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
评论 0
收藏 0
赞 0
分享
JavaScript中常用的运算符小结
JavaScript中常用的运算符小结，需要的朋友可以参考下。
评论 0
收藏 0
赞 0
分享
深入理解JavaScript系列(13) This? Yes,this!
在这篇文章里，我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明，这个主题很难，在不同执行上下文中this的确定经常会发生问题
评论 0
收藏 0
赞 0
分享
javascript （用setTimeout而非setInterval）
javascript （用setTimeout而非setInterval）如果用setInterval 可能出现 下次调用会在前一次调用前调用
评论 0
收藏 0
赞 0
分享
JavaScript中两个感叹号的作用说明
用两个感叹号的作用就在于，如果明确设置了o中flag的值（非null/undefined/0""/等值），自然test就会取跟o.flag一样的值；如果没有设置，test就会默认为false，而不是null或undefined
评论 0
收藏 0
赞 0
分享
javascript写的简单的计算器，内容很多，方法实用，推荐
最近用javascript写了一个简单的计算器，自己测试感觉还好,代码都给了注释，非常不错，推荐大家学习。
评论 0
收藏 0
赞 0
分享
js的表单操作 简单计算器
javascript写的简单的加减乘除计算器，里面涉及到一些方法还是很实用的哦，新手不要错过
评论 0
收藏 0
赞 0
分享
Jquery中删除元素的实现代码
empty用来删除指定元素的子元素，remove用来删除元素，或者设定细化条件执行删除
评论 0
收藏 0
赞 0
分享
javaScript 利用闭包模拟对象的私有属性
JavaScript缺少块级作用域，没有private修饰符，但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量（除了this和argument
评论 0
收藏 0
赞 0
分享
为JavaScript类型增加方法的实现代码(增加功能)
大家在js开发过程中有些功能已经满足不了我们的需求，或没有我们需要的功能，那么我们就可以自己扩展下，个性化js
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
网上赚钱怎么赚钱？网上兼职的方法有哪些
青西一女子轻信网络刷单2小时赚400元 被骗15万元
儿子网购Q币被骗 父亲怒找客服投诉又被骗
代刷信誉不能信，哪些网络兼职值得信赖呢？说说那些可靠的网络兼职
短视频如何赚钱？短视频自媒体实操经验分享(真实)
光大银行网上银行西联汇款收汇方法分享
站长故事
更多
美团副总裁杨俊：做O2O的4个关键节点 会高效率地花钱
为什么被黑的总是小米？
传统地摊转型网络营销90后农村小伙子月入过万
快播之死：中国互联网的政策红利期已结束
站长故事之我的个人站长之路
我对互联网VC的10点看法 知己知彼百战不殆
