jquery实现的弹出层登录和无刷新切换全屏层注册特效源码，是一段非常适合现代审美观的网站登录和注册效果代码，本段实例主要表现在点击登录后在当前页面内弹出登录遮罩层，而点击注册链接时，在当前页面内无刷新显示全屏注册层效果，是一款非常实用的特效代码，值得大家学习。
运行效果图：
-------------------查看效果 下载源码-------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jquery实现的弹出层登录和全屏层注册特效代码如下
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery弹出层登录和无刷新切换全屏层注册特效 </title> <meta content="jquery弹出层登录和无刷新切换全屏层注册特效" /> <meta content="jquery弹出层登录和无刷新切换全屏层注册特效" /> <link type="text/css" href="https://www.jb51.net/css/style.css" /> <script type="text/javascript" src="https://www.jb51.net/js/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.easing.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var k=!0; $(".loginmask").css("opacity",0.8); if($.browser.version <= 6){ $('#reg_setp,.loginmask').height($(document).height()); } $(".thirdlogin ul li:odd").css({marginRight:0}); $(".openlogin").click(function(){ k&&"0px"!=$("#loginalert").css("top")&& ($("#loginalert").show(),$(".loginmask").fadeIn(500),$("#loginalert").animate({top:0},400,"easeOutQuart")) }); $(".loginmask,.closealert").click(function(){ k&&(k=!1,$("#loginalert").animate({top:-600},400,"easeOutQuart",function(){$("#loginalert").hide();k=!0}),$(".loginmask").fadeOut(500)) }); $("#sigup_now,.reg a").click(function(){ $("#reg_setp,#setp_quicklogin").show(); $("#reg_setp").animate({left:0},500,"easeOutQuart") }); $(".back_setp").click(function(){ "block"==$("#setp_quicklogin").css("display")&&$("#reg_setp").animate({left:"100%"},500,"easeOutQuart",function(){$("#reg_setp,#setp_quicklogin").hide()}) }); }); </script> </head> <body> <div> <ul> <li><a href="javascript:void(0);">登录</a></li> <li><a href="javascript:void(0);">注册</a></li> </ul> </div> <div></div> <div> <div> <h3><i></i><div></div></h3> <div> <div> <div>会员登录</div> <div>还没有账号<a href="javascript:void(0);">立即注册</a></div> </div> <h3><span>邮箱登录</span><span>用户名或密码错误</span><div></div></h3> <form action="" method="post"> <div> <input type="text" value="" placeholder="邮箱/用户名" /> <input type="text" value="" placeholder="密码" /> <input type="password" /> </div> <div> <div><input type="submit" value="登录" /></div> <div><input type="checkbox" checked="true" />保持登录</div> <div><a href="https://www.jb51.net/">忘记密码?</a></div> <div></div> </div> </form> </div> </div> <div> <div> <h4>用第三方帐号直接登录</h4> <ul> <li><a href="https://www.jb51.net">微博帐号注册</a></li> <li><a href="https://www.jb51.net">QQ帐号注册</a></li> </ul> <div></div> </div> </div> </div><!--loginalert end--> <div> <div>返回</div> <div></div> <div> <h3>您可以选择以下第三方帐号直接登录代码笔记，一分钟完成注册</h3> <ul> <li><a href="https://www.jb51.net">微博帐号注册</a></li> <li><a href="https://www.jb51.net">QQ帐号注册</a></li> </ul> </div> </div><!--reg_setp end--> </body> </html>
以上就是为大家分享的jquery实现的弹出层登录和全屏层注册特效代码，希望大家可以喜欢。
您可能感兴趣的文章: