快捷導(dǎo)航

jquery實(shí)現(xiàn)彈出層登錄和全屏層注冊特效

更新時(shí)間：2015年08月28日 10:38:49 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)彈出層登錄和全屏層注冊特效，推薦給大家，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

jquery實(shí)現(xiàn)的彈出層登錄和無刷新切換全屏層注冊特效源碼，是一段非常適合現(xiàn)代審美觀的網(wǎng)站登錄和注冊效果代碼，本段實(shí)例主要表現(xiàn)在點(diǎn)擊登錄后在當(dāng)前頁面內(nèi)彈出登錄遮罩層，而點(diǎn)擊注冊鏈接時(shí)，在當(dāng)前頁面內(nèi)無刷新顯示全屏注冊層效果，是一款非常實(shí)用的特效代碼，值得大家學(xué)習(xí)。
運(yùn)行效果圖：

-------------------查看效果下載源碼-------------------

小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。

為大家分享的jquery實(shí)現(xiàn)的彈出層登錄和全屏層注冊特效代碼如下

<!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">會(huì)員登錄</div>
 <div class="fr">還沒有賬號(hào)<a id="sigup_now" href="javascript:void(0);">立即注冊</a></div>
 </div>
 <h3><span class="fl">郵箱登錄</span><span class="login_warning" style="display:none">用戶名或密碼錯(cuò)誤</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://www.dbjr.com.cn/">忘記密碼?</a></div>
  <div class="clear"></div>
 </div>
 </form>
 </div>
 </div>
 
 <div class="thirdlogin">
 <div class="pd50">
 <h4>用第三方帳號(hào)直接登錄</h4>
 <ul>
 <li id="sinal"><a href="http://www.dbjr.com.cn">微博帳號(hào)注冊</a></li>
 <li id="qql"><a href="http://www.dbjr.com.cn">QQ帳號(hào)注冊</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>您可以選擇以下第三方帳號(hào)直接登錄代碼筆記，一分鐘完成注冊</h3>
 <ul class="quicklogin_socical">
 <li class="quicklogin_socical_weibo"><a href="http://www.dbjr.com.cn">微博帳號(hào)注冊</a></li>
 <li class="quicklogin_socical_qq" style="margin:0;"><a href="http://www.dbjr.com.cn">QQ帳號(hào)注冊</a></li>
 </ul>
 </div>
</div><!--reg_setp end-->
</body>
</html>

以上就是為大家分享的jquery實(shí)現(xiàn)的彈出層登錄和全屏層注冊特效代碼，希望大家可以喜歡。

您可能感興趣的文章: