jquery实现弹出层登录和全屏层注册特效代码共享
本文通过一个例子来说明jquery多条件过滤的特殊效果。分享给大家参考。具体如下:jquery实现的弹出层登录和全屏层注册特效源代码是非常适合现代美学的网站登录和注册特效代码。这一段的例子主要表现为点击登录后在当前页面弹出登录蒙版图层,而点击注册链接时,全屏注册图层效果在当前页面显示,不刷新,是一个非常实用的特效代码,值得学习。运行渲染:查看效果并下载源代码。
提示:如果浏览器工作不正常,可以尝试切换浏览模式。jquery实现的弹出层登录和全屏层注册的特效代码如下
!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html;charset=utf-8' /titlejquery弹出层登录和无刷新切换全屏层注册特效/title meta name=' description ' content=' jquery弹出层登录和无刷新切换全屏层注册特效/meta name=' keywords ' content=' jquery弹出层登录和无刷新切换全屏层注册特效/link rel='样式表type=' text/CSS ' href=' CSS/style。CSS '/脚本类型=' text/JavaScript ' src=' http : js/jquery。量滴js '/script脚本类型=' text/JavaScript ' src=' http : js/jquery。放松。量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ var k=!0;$('.loginmask ').css(“”不透明度',0.8);if($。浏览器。版本=6){ $(' # reg _ setp,loginmask ').高度($(文档)。高度());} $('.第三世界.CSS({右边距:0 });$('.openlogin ').单击(function(){ k'0px!=$('#loginalert ').css('top') ($('#loginalert ').show(),$(' .loginmask ').fadeIn(500),$('#loginalert ').animate({top:0},400,' easeOutQuart '))});$('.loginmask ,关闭警报').click(function(){ k(k=!1,$('#loginalert ').动画({top:-600}、400、' easeOutQuart '、function(){$('#loginalert ').hide();k=!0}),$('.loginmask ').淡出(500))});$('#sigup_now,注册a ').单击(function(){ $('#reg_setp,#setp_quicklogin ').show();$(' # reg _ set ').animate({left:0},500,' easeOutQuart ')});$('.back _ setp’).单击(function(){ ' block '==$(' # setp _ quick log in ')).css('display')$('#reg_setp ').animate({left:'100%'},500,' easeOutQuart ',function(){$('#reg_setp,# setp _ quicklogin ').hide()})});});/script/head body div id=' header ' ul class=' log in fr ' Li class=' open log in ' a href=' JavaScript : void(0);'登录/a/Li Li class=' reg ' a href=' JavaScript : void(0);'注册/a/Li/ul/div class='登录掩码'/div div id=' loginalert ' div class=' pd20 loginpd ' h3i class='关闭警报fr '/idiv class='清除'/div/div class=' loginwrap ' div class=' loginnh ' div class=' fl '会员登录/div div class='fr '还没有账号a id=' sigup _ now ' href=' JavaScript : void(0);'立即注册/a/div /div h3span class='fl '邮箱登录/span span class=' log in _ warning ' style=' display : none '用户名或密码错误/span div class=' clear '/div/H3表单操作=' method=' post ' id=' log in _ form ' div class=' loginput '输入类型=' text ' name=' username ' class=' loginusername ' value=' placeholder='邮箱/用户名/input type=' text ' class=' loginuserpasswordt ' value=占位符='密码/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 class=' fl ' style=' margin 336026 px 0 0 0; 输入id='bcdl' type='checkbox '选中='true' /保持登录/div class=' fr ' style=' margin 336026 px 0 0 0;a href='//www.jb51.net/'忘记密码?/a/div class=' clear '/div/div/form/div/div class=' thirdlogin ' div class=' pd50 ' H4用第三方帐号直接登录/H4 ul Li id=' sinal ' a href='/www .JB 51。“净”微博帐号注册/a/李莉id=' QQ l ' a href='//www . Li。JB 51。网络QQ帐号注册/a/Li/ul div class=' clear '/div/div/div/div!-loginalert end-div id=' reg _ set p ' div class=' back _ set p '返回/div class=' blogo '/div div id=' set p _ quick log in ' H3您可以选择以下第三方帐号直接登录代码笔记,一分钟完成注册ul class='快速登录_ socical ' Li class='快速登录_ socical _ Weibo ' a href='//www .JB 51。“净”微博帐号注册/a/Li Li class='快速登录_ socical _ QQ ' style=' margin :0;a href='//www.jb51.net'QQ帐号注册/a/li /ul /div/div!- reg_setp end - /body/html以上就是为大家分享的jquery实现的弹出层登录和全屏层注册特效代码,希望大家可以喜欢。
版权声明:jquery实现弹出层登录和全屏层注册特效代码共享是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。

















