jquery实现的弹出层登录和全屏层注册特效代码分享

首页

web前端

js教程

jquery实现的弹出层登录和全屏层注册特效代码分享_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:41 PM

本文实例讲述了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 id="span-class-fl-邮箱登录-span-span-class-login-warning-style-display-none-用户名或密码错误-span-div-class-clear-div"><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://www.jb51.net/">忘记密码&#63;</a></div>
   <div class="clear"></div>
  </div>
  </form>
 </div>
 </div>
 
 <div class="thirdlogin">
 <div class="pd50">
  <h4 id="用第三方帐号直接登录">用第三方帐号直接登录</h4>
  <ul>
  <li id="sinal"><a href="http://www.jb51.net">微博帐号注册</a></li>
  <li id="qql"><a href="http://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 id="您可以选择以下第三方帐号直接登录代码笔记-一分钟完成注册">您可以选择以下第三方帐号直接登录代码笔记，一分钟完成注册</h3>
 <ul class="quicklogin_socical">
  <li class="quicklogin_socical_weibo"><a href="http://www.jb51.net">微博帐号注册</a></li>
  <li class="quicklogin_socical_qq" style="margin:0;"><a href="http://www.jb51.net">QQ帐号注册</a></li>
 </ul>
 </div>
</div><!--reg_setp end-->
</body>
</html>

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。