自制登录注册模态框

最新推荐文章于 2023-06-26 21:07:48 发布

htmld

最新推荐文章于 2023-06-26 21:07:48 发布

阅读量2.6k

点赞数 1

文章标签： javascript 脚本语言 html jquery

本文链接：https://blog.csdn.net/htmld/article/details/30049757

版权

这是我自制的登录注册模态框，需要引入jquery包，想看下效果的同学一定要切记，在本文件下放上jquery包。

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body{
font-family: "Lustria", Georgia, "Times New Roman", Times, serif;
}
#nav{
width: 1200px;
margin: auto;
border-radius: 50px;
background:-moz-linear-gradient(top, #222132, rgba(70, 50, 101, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#222132), to(rgba(70, 50, 101, 0.5)));
}
nav{
color:white;
font-size: 1.5em;
line-height: 1.2em;
margin: 20px 120px;
background-color:transparent;
}
nav li{
display: inline-block;
margin: 10px auto;
padding: 0px 20px;
border-right: 1px solid rgba(70, 50, 101, 0.5);
}
nav li:hover{
background-color: transparent;
color: orange;
cursor: pointer;
}
#model{
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
z-index: 11111;
display: none;
background-color: rgba(0,0,0,0.5);
}
#reg_log{
position: absolute;
left:0px;
height: 467px;
width: 352px;
overflow: hidden;
top:-1000px;
margin: auto 36.5%;
border: 1px solid white;
border-radius: 8px;
font-size: 0.9em;
background-color: #fafafa;
z-index: 22222;
transition: top 1s;
-moz-transition: top 1s;
-webkit-transition: top 1s;
-o-transition: top 1s;
}
#reg_log label{
font-size: 1.2em;
font-weight: bold;
color: #a0eec3;
margin-left: 0.4em;
margin-right: 1.2em;
}
input[type="text"],input[type="password"],input[type="submit"]{
outline: none;
padding:6px 12px 6px 12px;
border-radius: 4px;
border: 1px #a0c2c3 solid;
margin-bottom: 0.6em;
}
input[type="text"]:focus,input[type="password"]:focus{
border:1px pink solid;
}
input[type="submit"]{
color: #a0c2c3;
margin-left: 66.5%;
padding: 0.3em 1.5em;
font-size: 1.2em;
}
input[type="submit"]:hover{
background-color: pink;
color: white;
border-color:white;
}
hr{
border:1px dotted pink;
}
#item>li:nth-child(1){
display: inline-block;
line-height: 0px;
color: orange;
padding: 0px 15px;
border-radius:0% 65% 0% 65% ;
cursor: pointer;
}
#item>li:nth-child(2){
display: inline-block;
line-height: 0px;
color: orange;
padding: 0px 15px;
border-radius:65% 0% 65% 0% ;
cursor: pointer;
}
#item{
position: absolute;
top: 12px;
left: -35px;
right: 0px;
border-bottom: 4px solid orange;
}
#login{
position: absolute;
top:70px;
left:40px;
width: 270px;
display: inline;
transition: left 0.5s;
-moz-transition: left 0.5s;
-webkit-transition: left 0.5s;
-o-transition: left 0.5s;
}
#register{
position: absolute;
top:70px;
left:450px;
width: 270px;
display: inline;
transition: left 0.5s;
-moz-transition: left 0.5s;
-webkit-transition: left 0.5s;
-o-transition: left 0.5s;
}
#scrollfield{
position: absolute;
top:200px;
left:350px;
width: 560px;
height:350px;
border: 8px solid #42b796;
border-radius: 5px;
overflow:hidden;
background-color: black;
display: none;
}
#scrollImg{
position: absolute;
top:0px;
left: 0px;
height:350px;
width: 10000px;
transition: left 1s;
-moz-transition: left 1s;
-webkit-transition: left 1s;
-o-transition: left 1s;
}
#scrollImg>img{
display: inline;
margin-right: -4.4103px;
}
#imgChoose{
position: absolute;
top:86%;
width: 560px;
height: 50px;
background-color: rgb(0,0,0);
opacity: 0;
}
#imgChoose:hover{
opacity: 0.5;
}
.dot{
position: absolute;
top: 32%;
left:90%;
width: 10px;
height: 10px;
border-radius: 100%;
border:4px solid #42b796;
display: inline;
}
#imgfield{
position: absolute;
top:200px;
left:225px;
border: 5px solid #42b796;
border-radius: 5px;
}
#magnify{
position: absolute;
top:150px;
left:625px;
width: 450px;
height: 450px;
border: 2px solid orange;
border-radius: 10px;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#nav li:eq(0)").click(function(){
$("#scrollfield").toggle();
});
$("#nav li:eq(2)").click(function(){
$("#model").css("display","block");
$("#reg_log").css("top","50px");
});
$("#model").click(function(){
$(this).css("display","none");
$("#reg_log").css("top","-1000px");
});
$("#reg_log li:eq(0)").css("background-color","orange");
$("#reg_log li:eq(0)").css("color","white");
$("#reg_log li:eq(0)").click(function(){
$(this).css("background-color","orange");
$(this).css("color","white");
$("#reg_log li:eq(1)").css("background-color","transparent");
$("#reg_log li:eq(1)").css("color","orange");
$("#register").css("left","450px");
$("#login").css("left","40px");
});
$("#reg_log li:eq(1)").click(function(){
$(this).css("background-color","orange");
$(this).css("color","white");
$("#reg_log li:eq(0)").css("background-color","transparent");
$("#reg_log li:eq(0)").css("color","orange");
$("#login").css("left","-450px");
$("#register").css("left","40px");
});
});
var i=1,len,flag="ins";
function move(){
if(i < len&&flag === "ins"){
$("#d"+(i-1)).css("background-color","transparent");
$("#d"+i).css("background-color","orange");
$("#scrollImg").css("left",-1*(i*560)+"px");
i++;
setTimeout("move()",1800);
} else if(flag === "ins"){
i -= 2;
flag="des";
}
if(i >= 0&&flag === "des"){
$("#d"+(i+1)).css("background-color","transparent");
$("#d"+i).css("background-color","orange");
$("#scrollImg").css("left",-1*(i*560)+"px");
i--;
setTimeout("move()",1800);
}else if(flag === "des"){
i+=2;
flag="ins";
move();
}
}
function createDot(){
for(var i=0;i<len;i++){
$("#imgChoose").append("<div id='d"+i+"' class='dot' style='left:"+(90-(len-i-1)*5)+"%;'></div>");
}
}
function overDot(){
$("#imgChoose>div").hover(function(){
$(":animated").stop();
$(this).siblings().css("background-color","transparent");
$(this).css("background-color","orange");
var id = $(this).attr("id");
i = id[1];
},function(){
$(this).css("background-color","transparent");
});
}
$(function(){
len=$("#scrollImg>img").length;
createDot();
overDot();
move();
});
</script>
</head>
<body>
<header>
<div id="nav">
<nav>
<ul>
<li>jay</li>
<li>jacky</li>
<li style="border-right:0px;">joke</li>
</ul>
</nav>
</div>
</header>
<section>
<div id="reg_log">
<ul id="item">
<li><h2 style="text-align:left;">登录</h2></li>
<li><h2 style="text-align:left;">注册</h2></li>
</ul>
<form id="login">
<hr />
<label for="username">账号</label><br />
<input type="text" id="username" maxlength="100" size="35" required
placeholder="请输入账号"/><br />
<label for="password">密码</label><br />
<input type="password" id="password" maxlength="100" size="35" required
placeholder="请输入密码"/><br />
<input type="radio" id="male" name="sex" value="male" checked/>
<label for="male">女</label>
<input type="radio" id="female" name="sex" value="female"/>
<label for="female">男</label><br />
<label for="identity">身份证号</label>
<input type="text" id="identity" maxlength="100" size="35" required
placeholder="请输入身份证号"/><br />
<label for="address">家庭住址</label>
<input type="text" id="address" maxlength="100" size="35" required
placeholder="请输入家庭住址"/><br />
<label for="phone">联系电话</label>
<input type="text" id="phone" maxlength="100" size="35" required
placeholder="请输入联系电话"/><br /><hr />
<input type="submit" value="提交" />
</form>
<form id="register">
<hr />
<label for="username">账号</label><br />
<input type="text" id="username" maxlength="100" size="35" required
placeholder="请输入账号"/><br />
<label for="password">密码</label><br />
<input type="password" id="password" maxlength="100" size="35" required
placeholder="请输入密码"/><br />
<input type="radio" id="male" name="sex" value="male" checked/>
<label for="male">男</label>
<input type="radio" id="female" name="sex" value="female"/>
<label for="female">女</label><br />
<label for="identity">身份证号</label><br />
<input type="text" id="identity" maxlength="100" size="35" required
placeholder="请输入身份证号"/><br />
<label for="address">家庭住址</label><br />
<input type="text" id="address" maxlength="100" size="35" required
placeholder="请输入家庭住址"/><br />
<label for="phone">联系电话</label><br />
<input type="text" id="phone" maxlength="100" size="35" required
placeholder="请输入联系电话"/><br /><hr />
<input type="submit" value="提交" />
</form>
</div>
<div id="model">
</div>
<div id="scrollfield">
<div id="scrollImg">
<img src="1.jpg" height="350px;" width="560px;" />
<img src="2.jpg" height="350px;" width="560px;" />
<img src="3.jpg" height="350px;" width="560px;" />
<img src="4.jpg" height="350px;" width="560px;" />
<img src="5.jpg" height="350px;" width="560px;" />
</div>
<div id="imgChoose">
</div>
</div>
<div id="imgMagnify" style="display:none;">
<div id="imgfield">
<img src="3.jpg" height="180px" width="320px"></img>
</div>
<div id="magnify">
</div>
</div>
</section>
<footer>
</footer>
</body>
</html>