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 相关文章推荐
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
浅析javascript中的DOM
Mar 01 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
原生js实现放大镜效果
Jan 11 Javascript
vue-cli的工程模板与构建工具详解
Sep 27 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
tensorflow之并行读入数据详解
2020/02/05 Python
深入了解Python 变量作用域
2020/07/24 Python
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
美德好少年主要事迹
2014/01/29 职场文书
服务员岗位职责
2014/01/29 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
少年雷锋观后感
2015/06/10 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers
在python中读取和写入CSV文件详情
2022/06/28 Python
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python