网站权重一般有几个等级,软考网络工程师中级,织梦做手机网站,河北省省住房和城乡建设厅网站一#xff1a;源码获取 这两天根据需求写了一个比较好看的有动态效果的登录注册切换页面#xff0c;这里我将源码资源分享给大家#xff0c;大家可以直接免费下载使用哦#xff0c;没有 vip 的小伙伴找我私聊发送登录注册即可我给你发文件#xff0c;此登录注…一源码获取 这两天根据需求写了一个比较好看的有动态效果的登录注册切换页面这里我将源码资源分享给大家大家可以直接免费下载使用哦没有 vip 的小伙伴找我私聊发送登录注册即可我给你发文件此登录注册框放在任何管理系统都是非常炫酷的点睛之笔 一款非常炫酷登录注册页面-Javascript文档类资源-CSDN下载一个非常炫酷的的登录注册页面登录注册切换由jQuery实现原理简单易懂并且十几行代码就完成了更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/weixin_52212950/85799335 二效果展示 登录页面 注册页面 动态切换效果切换时采用了一种滑动切换的效果 三实现代码 此效果动态的实现原理也是非常简单的使用 jQuery 封装好的动画函数即可以下是其功能实现的js代码使用了 jQuery 封装好的 animate 动画函数在点击切换注册或登录框时就会调用 animate其内部回调函数内容为其登录和注册框哪个显示哪个不显示从而完成一种视觉上的切换效果其实归根到底还是 display 的显隐切换有 jQuery 基础 小伙伴就不难理解。 在这里在带领大家复习一下 animate 动画函数animate ( params , speed , easing , fn ) params 为必写参数 参数paramsspeedeasingfn含义写想要更改的样式属性以对象形式传递必写速度参数可写为 slownomarl fast也可以写成特定的毫秒数值用来指定特定的过度效果默认为 swing可换为 linear回调函数在动画执行完后调用动画函数内的内容 注意以对象形式传入要改变的属性并且设置动画函数的必须是元素不能是文档例如让整个页面移动时不能给 $(document) 设置动画函数而应该给 $(html) 设置动画函数这点很重要 document.addEventListener(DOMContentLoaded,function(event){document.addEventListener(selectstart,function(event){event.preventDefault();})document.addEventListener(contextmenu,function(event){event.preventDefault();})var random_boxdocument.querySelector(.random);var btndocument.querySelector(.reset);var wirtedocument.querySelector(.write);function random(min,max){return Math.floor(Math.random()*(max-min1))min;}btn.addEventListener(click,function(){btn.style.backgroundColor#fff;window.setTimeout(function(event){btn.style.backgroundColorrgb(255, 224, 146);},50)var randomsrandom(1000,9999);console.log(randoms);random_box.innerHTMLrandoms;})
})
$(function(){$(.change-register-button).on(click,function(){$(.login).animate({left:240px},400,function(){$(.login).css({display:none,left:60px})$(.change-register-box).css(display,none)$(.register).css(display,block)$(.change-login-box).css(display,block)})})$(.change-login-button).on(click,function(){$(.register).animate({right:240px},400,function(){$(.register).css({display:none,right:60px})$(.change-login-box).css(display,none)$(.login).css(display,block)$(.change-register-box).css(display,block)})})
})
四完整代码 HTML 代码: !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlelogin/titlelink relstylesheet href./login.cssscript src./jQuery.js/scriptscript src./login.js/script
/head
bodydiv classbackground
!-- 登录 --div classloginp classlogin-valueLOG IN/pform actioninput typetext classlogin-num placeholder请输入账号input typepassword classlogin-pwd placeholder请输入密码input typebutton value忘记密码 classforgetinput typesubmit value登录 classlogin-button/form/divdiv classchange-register-boxp classa还没有账户/pp classb点击加入我们吧/pbutton classchange-register-buttonSIGN UP nbsp;/button/div
!-- 注册 --div classregisterp classsignup-valueSIGN UP/pbutton classreset重新获取/buttonform actioninput typetext classsignup-num placeholder请输入账号input typepassword classsignup-pwd placeholder请输入密码input typepassword classsignup-repwd placeholder再次输入确认密码div classrandom????/divinput typetext classwrite placeholder请输入验证码input typesubmit value注册 classsignup-button/form/divdiv classchange-login-boxp classc欢迎加入/pp classd快去登陆看看吧/pbutton classchange-login-buttonnbsp; LOG IN/button/div/div
/body
/html CSS代码 body{background: url(./img/srchttp___pic1.win4000.com_wallpaper_2020-10-12_5f83b7c13d0b9.jpgreferhttp___pic1.win4000.webp);background-size: 110% ,110%;
}
.background{width: 900px;height: 400px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: rgba(10, 10, 10, 0.598);
}
/* 登录框 */
.login{position: absolute;top: -12%;left: 60px;width: 600px;height: 500px;background-color: rgb(249, 249, 249);z-index: 10;box-shadow: 0 0 12px 0.6px rgb(106, 106, 106);/* display: none; */
}
.login-value{width: 600px;font-size: 40px;font-weight: bold;color: rgb(255, 108, 108);padding-left: 60px;margin-top: 90px;
}
.login-num{width: 485px;height: 50px;outline: none;margin-top: -5px;margin-left: 60px;box-sizing: border-box;border-top: none;border-left: none;border-right: none;border-bottom: 2px solid rgb(182, 182, 182);background-color: transparent;font-size: 20px;color: grey;
}
.login-pwd{width: 485px;height: 50px;outline: none;margin-top: 30px;margin-left: 60px;box-sizing: border-box;border-top: none;border-left: none;border-right: none;border-bottom: 2px solid rgb(182, 182, 182);background-color: transparent;font-size: 20px;color: grey;
}
.forget{position: absolute;bottom: 90px;left: 60px;width: 220px;height: 60px;border: 1.5px solid rgb(151, 151, 151);background-color:transparent;font-size: 18px ;font-weight: bold;letter-spacing: 2px;color: rgb(113, 113, 113);
}
.forget:hover{background-color: rgb(235, 235, 235);
}
.login-button{position: absolute;bottom: 90px;right: 60px;width: 220px;height: 60px;border: none;background-color: rgb(222, 59, 59);;font-size: 20px ;font-weight: bold;letter-spacing: 10px;color: rgb(255, 255, 255);text-shadow: 1px 1px 1px rgb(138, 138, 138);
}
.login-button:hover{background-color: rgb(199, 38, 38);
}
/* 切换注册框的盒子 */
.change-register-box{position: absolute;right: 0px;width: 240px;height: 400px;background-color: transparent;/* display: none; */
}
.a{position: absolute;top: 90px;left: 62px;font-size: 18px;font-weight: bold;color: rgba(255, 255, 255, 0.846);letter-spacing: 2px;
}
.b{position: absolute;top: 140px;left: 46px;font-size: 18px;font-weight: bold;color: rgba(255, 255, 255, 0.858);letter-spacing: 2px;
}
.change-register-button{position: absolute;left: 46px;bottom: 120px;width: 140px;height: 50px;border: 1.5px solid #fff;background-color: transparent;letter-spacing: 2px;color: #fff;font-size: 16px;font-weight: bold;border-radius: 5px;
}
.change-register-button:hover{border: 1.5px solid rgb(217, 217, 217);color: rgb(217, 217, 217);
}
/* 注册框 */
.register{position: absolute;top: -12%;right: 60px;width: 600px;height: 500px;background-color: rgb(249, 249, 249);display: none;z-index: 10;box-shadow: 0 0 12px 0.6px rgb(106, 106, 106);
}.change-login-box{position: absolute;left: 0;width: 240px;height: 400px;background-color: transparent;display: none;
}
.signup-value{width: 600px;font-size: 40px;font-weight: bold;color: rgb(255, 108, 108);padding-left: 40px;margin-top: 30px;
}
.signup-num{width: 485px;height: 50px;outline: none;margin-top: -18px;margin-left: 60px;box-sizing: border-box;border-top: none;border-left: none;border-right: none;border-bottom: 2px solid rgb(182, 182, 182);background-color: transparent;font-size: 20px;color: grey;
}
.signup-pwd{width: 485px;height: 50px;outline: none;margin-top: 15px;margin-left: 60px;box-sizing: border-box;border-top: none;border-left: none;border-right: none;border-bottom: 2px solid rgb(182, 182, 182);background-color: transparent;font-size: 20px;color: grey;
}
.signup-repwd{width: 485px;height: 50px;outline: none;margin-top: 15px;margin-left: 60px;box-sizing: border-box;border-top: none;border-left: none;border-right: none;border-bottom: 2px solid rgb(182, 182, 182);background-color: transparent;font-size: 20px;color: grey;
}
.random{position: absolute;top: 305px;left: 60px;width: 110px;height: 47px;border: 1px solid black;line-height :47px; text-align: center;font-size: 27px;font-weight: bold;letter-spacing: 3px;background-color: rgb(221, 246, 255);color: grey;
}
.reset{position: absolute;top: 305px;left: 186px;width: 150px;height: 47px;border: 1px solid black;line-height :47px; text-align: center;font-size: 16px;font-weight:600;letter-spacing: 3px;background-color: rgb(255, 224, 146);border-radius: 6px;color: rgb(92, 92, 92);/* text-shadow: 2px 1px 1px grey; */
}
.write{position: absolute;top: 305px;right: 58px;width: 180px;height: 47px;border: 1px solid black;outline: none;font-size: 22px;padding-left: 10px;
}
.signup-button{position: absolute;bottom: 50px;right: 60px;width: 482px;height: 60px;border: none;background-color: rgb(222, 59, 59);;font-size: 20px ;font-weight: bold;letter-spacing: 15px;color: rgb(255, 255, 255);text-shadow: 1px 1px 1px rgb(138, 138, 138);
}
.signup-button:hover{background-color: rgb(199, 38, 38);
}
.c{position: absolute;top: 90px;left: 79px;font-size: 18px;font-weight: bold;color: rgba(255, 255, 255, 0.846);letter-spacing: 2px;
}
.d{position: absolute;top: 140px;left: 46px;font-size: 18px;font-weight: bold;color: rgba(255, 255, 255, 0.858);letter-spacing: 2px;
}
.change-login-button{position: absolute;left: 46px;bottom: 120px;width: 140px;height: 50px;border: 1.5px solid #fff;background-color: transparent;letter-spacing: 2px;color: #fff;font-size: 16px;font-weight: bold;border-radius: 5px;
}
.change-login-button:hover{border: 1.5px solid rgb(217, 217, 217);color: rgb(217, 217, 217);
} 创作不易你的支持就是我最大的动力
