超级简单 jQuery+JS+HTML+CSS实现的炫酷登录注册界面(超级简单的简笔画)
生活随笔
收集整理的這篇文章主要介紹了
超级简单 jQuery+JS+HTML+CSS实现的炫酷登录注册界面(超级简单的简笔画)
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一：源碼獲取
這兩天根據(jù)需求寫(xiě)了一個(gè)比較好看的有動(dòng)態(tài)效果的登錄注冊(cè)切換頁(yè)面，這里我將源碼資源分享給大家，大家可以直接免費(fèi)下載使用哦，沒(méi)有 vip 的小伙伴找我私聊發(fā)送"登錄注冊(cè)"即可我給你發(fā)文件，此登錄注冊(cè)框放在任何管理系統(tǒng)都是非常炫酷的點(diǎn)睛之筆！
二：效果展示
登錄頁(yè)面：
注冊(cè)頁(yè)面：
動(dòng)態(tài)切換效果：切換時(shí)采用了一種滑動(dòng)切換的效果
三：實(shí)現(xiàn)代碼：
此效果動(dòng)態(tài)的實(shí)現(xiàn)原理也是非常簡(jiǎn)單的，使用 jQuery 封裝好的動(dòng)畫(huà)函數(shù)即可，以下是其功能實(shí)現(xiàn)的js代碼，使用了 jQuery 封裝好的 animate 動(dòng)畫(huà)函數(shù)，在點(diǎn)擊切換注冊(cè)或登錄框時(shí)就會(huì)調(diào)用 animate，其內(nèi)部回調(diào)函數(shù)內(nèi)容為其登錄和注冊(cè)框哪個(gè)顯示哪個(gè)不顯示，從而完成一種視覺(jué)上的切換效果，其實(shí)歸根到底還是 display 的顯隱切換，有 jQuery 基礎(chǔ) 小伙伴就不難理解。
- 在這里在帶領(lǐng)大家復(fù)習(xí)一下 animate 動(dòng)畫(huà)函數(shù)
- animate ( params , speed , easing , fn ) params 為必寫(xiě)參數(shù) ！！！
| 參數(shù) | params | speed | easing | fn |
| 含義 | 寫(xiě)想要更改的樣式屬性，以對(duì)象形式傳遞，必寫(xiě) | 速度參數(shù)，可寫(xiě)為 slow，nomarl， fast，也可以寫(xiě)成特定的毫秒數(shù)值 | 用來(lái)指定特定的過(guò)度效果，默認(rèn)為 swing，可換為 linear | 回調(diào)函數(shù)，在動(dòng)畫(huà)執(zhí)行完后調(diào)用動(dòng)畫(huà)函數(shù)內(nèi)的內(nèi)容 |
注意以對(duì)象形式傳入要改變的屬性，并且設(shè)置動(dòng)畫(huà)函數(shù)的必須是元素，不能是文檔，例如讓整個(gè)頁(yè)面移動(dòng)時(shí)，不能給 $(document) 設(shè)置動(dòng)畫(huà)函數(shù)，而應(yīng)該給 $('html') 設(shè)置動(dòng)畫(huà)函數(shù)，這點(diǎn)很重要！！！！！！！！！！
核心js代碼
document.addEventListener('DOMContentLoaded',function(event){
document.addEventListener('selectstart',function(event){
event.preventDefault();
})
document.addEventListener('contextmenu',function(event){
event.preventDefault();
})
var random_box=document.querySelector('.random');
var btn=document.querySelector('.reset');
var wirte=document.querySelector('.write');
function random(min,max){
return Math.floor(Math.random()*(max-min+1))+min;
}
btn.addEventListener('click',function(){
btn.style.backgroundColor='#fff';
window.setTimeout(function(event){
btn.style.backgroundColor='rgb(255, 224, 146)';
},50)
var randoms=random(1000,9999);
console.log(randoms);
random_box.innerHTML=randoms;
})
})
$(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 lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>login</title>
<link rel="stylesheet" href="./login.css">
<script src="./jQuery.js"></script>
<script src="./login.js"></script>
</head>
<body>
<p class="accc-b81e-5dd6-bacf background">
<!-- 登錄 -->
<p class="b81e-5dd6-bacf-d777 login">
<p class="9e8a-972a-53b1-8f9e login-value">LOG IN</p>
<form action="">
<input type="text" class="972a-53b1-8f9e-f801 login-num" placeholder="請(qǐng)輸入賬號(hào)">
<input type="password" class="53b1-8f9e-f801-fd8a login-pwd" placeholder="請(qǐng)輸入密碼">
<input type="button" value="忘記密碼？" class="8f9e-f801-fd8a-f6ea forget">
<input type="submit" value="登錄" class="f801-fd8a-f6ea-d131 login-button">
</form>
</p>
<p class="fd8a-f6ea-d131-d19d change-register-box">
<p class="f6ea-d131-d19d-599e a">還沒(méi)有賬戶？</p>
<p class="d131-d19d-599e-e3a8 b">點(diǎn)擊加入我們吧</p>
<button class="d19d-599e-e3a8-6e7e change-register-button">SIGN UP ></button>
</p>
<!-- 注冊(cè) -->
<p class="599e-e3a8-6e7e-f383 register">
<p class="e3a8-6e7e-f383-accc signup-value">SIGN UP</p>
<button class="6e7e-f383-accc-b81e reset">重新獲取</button>
<form action="">
<input type="text" class="f383-accc-b81e-5dd6 signup-num" placeholder="請(qǐng)輸入賬號(hào)">
<input type="password" class="accc-b81e-5dd6-bacf signup-pwd" placeholder="請(qǐng)輸入密碼">
<input type="password" class="b81e-5dd6-bacf-d777 signup-repwd" placeholder="再次輸入確認(rèn)密碼">
<p class="9e8a-972a-53b1-8f9e random">????</p>
<input type="text" class="972a-53b1-8f9e-f801 write" placeholder="請(qǐng)輸入驗(yàn)證碼">
<input type="submit" value="注冊(cè)" class="53b1-8f9e-f801-fd8a signup-button">
</form>
</p>
<p class="8f9e-f801-fd8a-f6ea change-login-box">
<p class="f801-fd8a-f6ea-d131 c">歡迎加入</p>
<p class="fd8a-f6ea-d131-d19d d">快去登陸看看吧</p>
<button class="f6ea-d131-d19d-599e change-login-button">< LOG IN</button>
</p>
</p>
</body>
</html>
CSS代碼：
body{
background: url(./img/src=http___pic1.win4000.com_wallpaper_2020-10-12_5f83b7c13d0b9.jpg&refer=http___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);
}
/* 切換注冊(cè)框的盒子 */
.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);
}
/* 注冊(cè)框 */
.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);
}
到此這篇關(guān)于超級(jí)簡(jiǎn)單 jQuery+JS+HTML+CSS實(shí)現(xiàn)的炫酷登錄注冊(cè)界面的文章就介紹到這了,更多相關(guān)炫酷登錄注冊(cè)界面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
總結(jié)
以上是生活随笔為你收集整理的超级简单 jQuery+JS+HTML+CSS实现的炫酷登录注册界面(超级简单的简笔画)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： macbookair如何恢复出厂设置 m
- 下一篇： 天猫魔盒8 Pro和天猫魔盒7怎么选?