您的位置:首页 > Web前端 > JQuery

网站注册、登录、换肤jquery代码实现

2017-04-10 13:11 465 查看
HTML部分

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>健身俱乐部</title>
<link rel="stylesheet" href="css/demo.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/style.js" ></script>
<script type="text/javascript" src="js/jquery.cookie.js" ></script>
<script type="text/javascript" src="js/demo.js" ></script>
</head>

<body>
<!--head开始-->
<div class="head">
<ul class="head-con">
<li class="item1">
<a href="#">登录</a>
</li>
<li class="item2">
<a href="#">注册</a>
</li>
<li class="item3">
<a href="#">换肤</a>
</li>
</ul>
</div>

<!--head导航开始菜单结束-->
<!--login  regin登录 注册开始-->
<div id="login">
<div class="login-icon"><span>登录</span><span class="faout">╳ </span></div>
<div class="login-con"><input type="text" id="user" name="user" placeholder="请输入用户名"><p></p></div>
<div class="login-con"><input type="password" id="pas" name="pas" placeholder="请输入密码"><p></p></div>
<div class="login-lo">
<a href="#">立即登录</a>
</div>
</div>
<div id="regin">
<div class="login-icon"><span>注册</span>
<span class="faout">╳ </span></div>
<div class="login-con"><input type="text" id="user"  placeholder="请输入用户名"><p></p></div>
<div class="login-con"><input type="password" id="pas" placeholder="请输入密码"><p></p></div>
<div class="login-con"><input type="text" id="tel" placeholder="请输入手机号码"><p></p></div>
<div class="login-con"><input type="text" id="num" placeholder="请输入手机验证码"><p></p></div>
<div class="login-lo">
<a href="#">立即注册</a>
</div>
</div>
<!--/*login  regin 登录注册弹框结束*/-->
<!--换肤栏skin开始-->
<div id="skin">
<!--换肤里面的导航菜单title开始-->
<div class="title">
<uL class="title-cn">
<li class="hot showimg">最热</li>
<li class="new showimg">最新</li>
   <li class="start showimg">明星</li>
   <li class="carton showimg">卡通</li>
   <li class="item4">收起</li>
   <div class="triangle tb-border tb-background"></div>  
</uL>
</div>
<div class="btn bt1"><</div>
<div class="btn bt2">></div>
<!--换肤里面的导航菜单title结束-->

<!--换肤里面的图片放置区title-img开始-->
<div id="title-img">

<div id="img-img">
<!--最热菜单.hot下的图片开始-->
<div class="img0">
<ul class="img-1">
<li><img src="img/k.jpg"></li><li><img src="img/l.jpg"></li>
<li><img src="img/m.jpg"></li><li><img src="img/o.jpg"></li>
</ul>
<ul class="img-2">
<li><img src="img/e.jpg"></li><li><img src="img/b.jpg"></li>
<li><img src="img/e.jpg"></li><li><img src="img/b.jpg"></li>
</ul>
</div>
<!--最热菜单.hot下的图片结束-->

<!--最新菜单.new下的图片开始-->
<div class="img1">
<ul class="img-1">
<li><img src="img/a.jpg"></li><li><img src="img/i.jpg"></li>
<li><img src="img/a.jpg"></li><li><img src="img/c.jpg"></li>
</ul>
<ul class="img-2">
<li><img src="img/g.jpg"></li><li><img src="img/h.jpg"></li>
<li><img src="img/o.jpg"></li><li><img src="img/j.jpg"></li>
</ul>
</div>
<!--最新菜单.new下的图片结束-->

<!--明星菜单.start下的图片开始-->
<div class="img2">
<ul class="img-1">
<li><img src="img/p.jpg"></li><li><img src="img/g.jpg"></li>
<li><img src="img/k.jpg"></li><li><img src="img/m.jpg"></li>
</ul>
<ul class="img-2">
<li><img src="img/e.jpg"></li><li><img src="img/o.jpg"></li>
<li><img src="img/l.jpg"></li><li><img src="img/f.jpg"></li>
</ul>
</div>
<!--明星菜单.strar下的图片结束-->

<!--卡通菜单.carton下的图片开始-->
<div class="img
e638
3">
<ul class="img-1">
<li><img src="img/p.jpg"></li><li><img src="img/j.jpg"></li>
<li><img src="img/h.jpg"></li><li><img src="img/k.jpg"></li>
</ul>
<ul class="img-2">
<li><img src="img/f.jpg"></li><li><img src="img/l.jpg"></li>
<li><img src="img/e.jpg"></li><li><img src="img/b.jpg"></li>
</ul>
</div>
<!--卡通菜单.carton下的图片结束-->
</div>

</div>
<!--换肤里面的图片放置区结束title-img-->
</div>
<!--换肤栏skin结束-->
</body>
</html>

css部分

* {
margin: 0;
padding: 0;
font-family: "微软雅黑";
font-size: 14px;

}

ul{
list-style: none;

}

li{
float: left;

}

a{
text-decoration: none;

}

/*head开始*/

.head {
width: 100%;
height: 40px;
background-color: #000000;

}

.head-con {
width: 900px;
height: 40px;
margin: 0 auto;
/*background-color: #19B955;*/

}

.item1,

.item2,

.item3 {
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
margin-right: 5px;

}

.item1,

.item2 {
float: right;

}

.item3 {
float: left;

}

.item1 a,

.item2 a,

.item3 a {
font-size: 16px;
color: #fff;

}

/*<!--head导航开始菜单结束-->*/

/*login  regin 登录注册弹框开始*/

#login,

#regin {
width: 292px;
margin-left: 10px;
border: 1px solid #CCCCCC;
background-image: #fff;
display: none;
position: absolute;
background-color: #FFFFFF;

}

#regin {
position: absolute;

}

.login-icon {
width: 292px;
height: 40px;
background-color: #EDF8FC;

}

.login-icon span {
text-align: center;
line-height: 40px;
margin: 0 5px;

}

.login-icon span:first-child {
float: left;
font-size: 16px;

}

.login-icon span:last-child {
float: right;
margin: 0 10px;
font-size: 24px;
cursor: pointer;

}

.login-con input {
width: 268px;
height: 40px;
margin: 12px 10px;

}

.login-lo {
width: 272px;
height: 45px;
margin: 12px 10px;
background-color: #76D539;

}

.login-lo a {
display: block;
text-align: center;
font-size: 16px;
font-weight: 600;
line-height: 45px;
color: #FFFFFF;

}

/*login  regin 登录注册弹框结束*/

/*<!--换肤栏skin开始-->*/

#skin {
width: 100%;
position: absolute;
height: 340px;
display: none;
left: 0;
top: 0;

}

/*<!--换肤里面的导航菜单title开始-->*/

.title {
height: 40px;
background-color: #000;

}

.title-cn {
width: 900px;
height: 40px;
margin: 0 auto;
position: relative;

}

.title-cn li {
width: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #FFFFFF;

}

.title-cn li:hover{
cursor: pointer;
color: #19B955;

}

.item4 {
cursor: pointer;
float: right;

}

.triangle {
position:absolute;
left: 10px;
overflow: hidden;
width: 0;
height: 0;
border-width: 8px;
border-style: solid dashed dashed dashed;

}

.tb-border {
top: 25px;
border-color: transparent transparent cornsilk transparent;

}

.tb-background {
top: 24px;
border-color: transparent transparent cornsilk transparent;

}

.title-cn li:first-child {
color: #19B955;

}

.btn{
width: 30px;
height: 100px;
background-color: rgba(0,0,0,0.3);
margin-top: 100px;
text-align: center;
line-height: 100px;
font-weight: bold;
font-size: 40px;
color: #d4d4d4;

}

.btn:hover{
cursor: pointer;
background-color:#fdfdfd;

}

.bt1 {
float: left;
margin-left: 190px;

}

.bt2 {
float: right;
margin-right: 190px;

}

/*<!--换肤里面的导航菜单title结束-->*/

/*<!--换肤里面的图片放置区title-img-->*/

#title-img {
height: 300px;
background-color: cornsilk;

}

#img-img

{
width: 900px;
height: 300px;
margin: 0 auto;

}

.img0,.img1,.img2,.img3{
position: absolute;

}

.img-1,.img-2 {
height: 130px;
padding: 10px;
margin: 0;
padding-left: 10px;

}

.img0 li img,.img1 li img

,.img2 li img,.img3 li img {
width: 200px;
margin: 0 7px;
border: 3px solid #FFFFFF;

}

.img0 li img:hover,.img1 li img:hover

,.img2 li img:hover,.img3 li img:hover

{
border: 3px solid gray;
cursor: pointer;



/*<!--换肤里面的图片放置区title-img开始-->*/

/*换肤栏skin结束*/

jquery部分

$(function(){
/*登录login 注册regin弹窗开始*/
function getpos(id){
$(id).offset({
left:($(document).width()-$(id).outerWidth())/2,
top:($(document).height()-$(id).outerHeight())/2
});
}
getpos("#login");
$(".item1").on("click",function(){
$("#login").fadeIn();
});
getpos("#regin");
$(".item2").on("click",function(){
$("#regin").fadeIn();
});
$(".faout").on("click",function(){
$("#login").fadeOut(10);
});
$(".faout").on("click",function(){
$("#regin").fadeOut(10);
});
$("#pas").on("blur",function(){
var pasward=$("#pas").val();
var reg=/^(\w){6,12}$/;
if(!reg.test(pasward)){
$(this).next().html("请输入6到12位密码").show();
}else{
$(this).next().html("请输入6到12位密码").hide();
}

})
$("#tel").on("blur",function(){
var telnum=$("#tel").val();
var reg=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
if(!reg.test(telnum)){
$(this).next().html("请输入手机号码").show();
}else{
$(this).next().html("请输入手机号码").hide();
}
})
$("#num").on("blur",function(){
var num=$("#num").val();
var reg=/\d{4,6}$/;
if(!reg.test(num)){
$(this).next().html("请输入验证码").show();
}else{
$(this).next().html("请输入验证码").hide();
}
})

/*登录login 注册regin弹窗结束*/

/*换肤框出现和隐藏开始*/
$(".item3").on("click",function(){
$("#skin").fadeIn();
})
$(".item4").on("click",function(){
$("#skin").fadeOut();
})

/*换肤框出现和隐藏开始*/

/*换肤导航栏三角形切换效果以及对应导航内容显示效果开始*/

$(".img0").show().siblings().hide();//页面加载,img0显示,其他同级元素隐藏

$(".showimg").on("click",function(){
var i=$(this).index();/*当鼠标点击时,$(this).index()获得$(this)是同级的第几个元素*/
$(this).css({"color":"#19B955"}).siblings().css({"color":"#fff"});
/*siblings()选择同级元素的其他元素*/
if(i<4){
$(".triangle").css("left",(i*40+10)+"px");
}
})
$(".showimg").on("click",function(){
var i=$(this).index();
$(".img"+i).show().siblings().hide();
});

/*换肤导航栏三角形切换效果以及对应导航内容显示效果开始*/

/*换肤开始*/
$("#title-img li img").on("click",function(){
$("body").attr("background",$(this).attr("src"));/*$(this).attr("src")获得图片路径*/
$("#skin").slideUp(1500);//换肤结束换肤框自动收起
var bg=$(this).attr("src");
$.cookie("theme",bg,{expires:1000});//页面缓存,换肤后图片保存
});
var skincookie=$.cookie("theme");
if(skincookie){
$("body").attr("background",skincookie)
}

/*换肤结束*/

/*轮播开始*/

var i=0;

$(".bt2").on("click",function(){
if(i==3)
{
i=-1
}
i++;
$(".img"+i).fadeIn().siblings(1000).fadeOut();
$(".triangle").css("left",(i*40+10)+"px");
$(".showimg").eq(i).css({"color":"#19B955"}).siblings().css({"color":"#fff"});

})

$(".bt1").on("click",function(){
if(i==0)
{
i=4;
}
i--;
$(".img"+i).fadeIn(1000).siblings().fadeOut(500);
$(".triangle").css("left",(i*40+10)+"px");
$(".showimg").eq(i).css({"color":"#19B955"}).siblings().css({"color":"#fff"});

})

/*轮播结束*/

});

 cookie插件下载路径   http://www.jq22.com/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息