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


Posted in Javascript onAugust 28, 2015

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="//3water.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="//3water.com">微博帐号注册</a></li>
 <li id="qql"><a href="//3water.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="//3water.com">微博帐号注册</a></li>
 <li class="quicklogin_socical_qq" style="margin:0;"><a href="//3water.com">QQ帐号注册</a></li>
 </ul>
 </div>
</div><!--reg_setp end-->
</body>
</html>

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

Javascript 相关文章推荐
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
PassWord输入框代码分享
Jun 07 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
原生JS实现音乐播放器
Jan 26 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 #Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 #Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 #Javascript
谈谈JavaScript中function多重理解
Aug 28 #Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 #Javascript
jQuery表单验证功能实例
Aug 28 #Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 #Javascript
You might like
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
php 一元分词算法
2009/11/30 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
php中hashtable实现示例分享
2014/02/13 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
Python 列表(List)操作方法详解
2014/03/11 Python
python网络编程示例(客户端与服务端)
2014/04/24 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
django富文本编辑器的实现示例
2019/04/10 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
Python如何读取、写入CSV数据
2020/07/28 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
网络事业创业计划书范文
2014/01/09 职场文书
《太阳》教学反思
2014/02/21 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
公务员年度考核评语
2014/12/31 职场文书
检讨书范文1000字
2015/01/28 职场文书