脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery弹出层登录 注册特效

jquery实现弹出层登录和全屏层注册特效

 更新时间：2015年08月28日 10:38:49   投稿：lijiao  
这篇文章主要为大家详细介绍了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="//www.jb51.net/">忘记密码?</a></div>
  <div class="clear"></div>
 </div>
 </form>
 </div>
 </div>
 
 <div class="thirdlogin">
 <div class="pd50">
 <h4>用第三方帐号直接登录</h4>
 <ul>
 <li id="sinal"><a href="//www.jb51.net">微博帐号注册</a></li>
 <li id="qql"><a href="//www.jb51.net">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="//www.jb51.net">微博帐号注册</a></li>
 <li class="quicklogin_socical_qq" style="margin:0;"><a href="//www.jb51.net">QQ帐号注册</a></li>
 </ul>
 </div>
</div><!--reg_setp end-->
</body>
</html>

以上就是为大家分享的jquery实现的弹出层登录和全屏层注册特效代码，希望大家可以喜欢。

您可能感兴趣的文章:

相关文章

  • 解决jquery实现的radio重新选中的问题

    解决jquery实现的radio重新选中的问题

    这篇文章主要介绍了解决jquery实现的radio重新选中的问题的方法和示例，十分的实用，有需要的小伙伴可以参考下。
    2015-07-07
  • juqery 学习之四 筛选过滤

    juqery 学习之四 筛选过滤

    juqery 学习之四 筛选过滤函数说明，学习jquery的朋友可以参考下。
    2010-11-11
  • 基于jQuery排序及应用实现Tab栏特效

    基于jQuery排序及应用实现Tab栏特效

    这篇文章主要介绍了基于jQuery排序及应用实现Tab栏特效，jquery是基于JavaScript语言写出来的一个框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，但实质上还是js，所以JQuery也属于网页编程语言。下面更多内容需要的小伙伴可以参考一下
    2022-03-03
  • jquery实现二级导航下拉菜单效果

    jquery实现二级导航下拉菜单效果

    这篇文章主要介绍了jquery实现二级导航下拉菜单效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • jQuery ajax BUG：object doesn''t support this property or method

    jQuery ajax BUG：object doesn''t support this property or met

    使用$.ajax时出现的错误，IE7下才会出错，IE6,IE8都正常。
    2010-07-07
  • jQuery获取file控件中图片的宽高与大小

    jQuery获取file控件中图片的宽高与大小

    本文通过实例代码告诉大家如何利用jQuery获取file控件中图片的宽高与大小，在我们上传之前就可以检查上传图片的大小，高度，宽度是否适合我们的要求了，下面是关于判断图片的宽高大小的代码。
    2016-08-08
  • jquery.tableSort.js表格排序插件使用方法详解

    jquery.tableSort.js表格排序插件使用方法详解

    这篇文章主要为大家详细介绍了jquery.tableSort.js表格排序插件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 分享20款好玩的jQuery游戏

    分享20款好玩的jQuery游戏

    jQuery是时下最流行的 JavaScript 库。现在，除了HTML5以外，也有很多jQuery爱好者使用jQuery来开发游戏，虽然效果没有Flash那么好，但是这些游戏也看起来很酷。
    2011-04-04
  • jquery将一个表单序列化为一个对象的方法

    jquery将一个表单序列化为一个对象的方法

    将表单序列化为一个对象的方法有很多，在本文为大家介绍下使用jquery是如何做到的，感兴趣的朋友可以参考下
    2014-01-01
  • Jquery解析json数据详解

    Jquery解析json数据详解

    本篇文章主要是对Jquery解析json数据进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12

最新评论