本文實例講述了jquery實現多條件篩選特效。分享給大家供大家參考。具體如下：
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 name="description" content="jquery彈出層登錄和無刷新切換全屏層注冊特效" /><meta name="keywords" content="jquery彈出層登錄和無刷新切換全屏層注冊特效" /><link rel="stylesheet" type="text/css" href="css/style.css" /><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="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 id="header"> <ul class="login fr"> <li class="openlogin"><a href="javascript:void(0);">登錄</a></li> <li class="reg"><a href="javascript:void(0);">注冊</a></li> </ul></div><div class="loginmask"></div><div id="loginalert"> <div class="pd20 loginpd"> <h3><i class="closealert fr"></i><div class="clear"></div></h3> <div class="loginwrap"> <div class="loginh"> <div class="fl">會員登錄</div> <div class="fr">還沒有賬號<a id="sigup_now" href="javascript:void(0);">立即注冊</a></div> </div> <h3><span class="fl">郵箱登錄</span><span class="login_warning" style="display:none">用戶名或密碼錯誤</span><div class="clear"></div></h3> <form action="" method="post" id="login_form"> <div class="logininput"> <input type="text" name="username" class="loginusername" value="" placeholder="郵箱/用戶名" /> <input type="text" class="loginuserpasswordt" value="" placeholder="密碼" /> <input type="password" name="password" class="loginuserpasswordp" style="display:none" /> </div> <div class="loginbtn"> <div class="loginsubmit fl"><input type="submit" value="登錄" class="btn" /></div> <div class="fl" style="margin:26px 0 0 0;"><input id="bcdl" type="checkbox" checked="true" />保持登錄</div> <div class="fr" style="margin:26px 0 0 0;"><a href="http://m.survivalescaperooms.com/">忘記密碼?</a></div> <div class="clear"></div> </div> </form> </div> </div> <div class="thirdlogin"> <div class="pd50"> <h4>用第三方帳號直接登錄</h4> <ul> <li id="sinal"><a href="http://m.survivalescaperooms.com">微博帳號注冊</a></li> <li id="qql"><a href="http://m.survivalescaperooms.com">QQ帳號注冊</a></li> </ul> <div class="clear"></div> </div> </div> </div><!--loginalert end--><div id="reg_setp"> <div class="back_setp">返回</div> <div class="blogo"></div> <div id="setp_quicklogin"> <h3>您可以選擇以下第三方帳號直接登錄代碼筆記，一分鐘完成注冊</h3> <ul class="quicklogin_socical"> <li class="quicklogin_socical_weibo"><a href="http://m.survivalescaperooms.com">微博帳號注冊</a></li> <li class="quicklogin_socical_qq" style="margin:0;"><a href="http://m.survivalescaperooms.com">QQ帳號注冊</a></li> </ul> </div></div><!--reg_setp end--></body></html>以上就是為大家分享的jquery實現的彈出層登錄和全屏層注冊特效代碼，希望大家可以喜歡。
新聞熱點
疑難解答
