jquery可切换主题的注册表单js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery可切换主题的注册表单js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery可切换主题的注册表单</title>
    <link href="static/css/member/vip.css" rel="stylesheet" type="text/css" />
    <link href="static/css/member/skin_01.css" rel="stylesheet" type="text/css" id="skin" />
</head>
<body>
    <div class="main">
        <div class="main_t"></div>
        <div class="main_m">
            <div class="main_bd">
                <div class="run"><a href="javascript:void(0)" class="a1 run_skin" title="皮肤设置"></a><a href="javascript:void(0)" class="a2 run_tm" title="透明度设置"></a></div>
                <div class="yskj step1">
                    <div class="yskj_tt"><b>会员注册</b></div>
                    <form method="post">
                        <input type="hidden" name="pid" value="10046" />
                        <input type="hidden" name="parentid" value="" />
                        <div class="yskj_bd">
                            <ul class="ul">
                                <li><label>账户名称：</label><input id="account" name="account" type="text" class="txt1 txt" placeholder="请输入5位数字ID或者邮箱" /></li>
                                <li><label>设置密码：</label><input id="password" name="password" type="password" class="txt1 txt" /></li>
                                <li><label>确认密码：</label><input id="passwordto" name="passwordto" type="password" class="txt1 txt" /></li>
                                <li id="captchas" class="dn"><label>短信验证码：</label><input name="captcha" class="txt1 txt" style=" width:130px;" /><a id="gsc" href="javascript:void(0);" class="u-btn-red ml10">获取短信验证码</a></li>
                            </ul>
                            <div class="reg"><input type="submit" name="dosubmit" value="立即注册" class="btn2" /><a href="?app=member" class="btn3">已有账号</a></div>
                            <div class="other_login" style="margin-left:140px;">
                                其他账号登陆：
                                <a href="api/oauth.php?action=geturl"><img src="static/css/member/images/login/qq_big.png" height="16" /></a>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="main_bg opcity"></div>
            </div>
        </div>
        <div class="main_b"></div>
    </div>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="static/javascript/jquery.lqper.js"></script>
    <script type="text/javascript" src="static/javascript/login.js"></script>
    <!--[if IE 6]>
    <script type="text/javascript" src="static/javascript/DD_belatedPNG.js"></script>
    <script>
    DD_belatedPNG.fix('.main_t,.main_m,.main_b,.run a');
    </script>
    <![endif]-->
</body>
</html>

JS代码(jquery.lqper.js):

/*Cookie plugin */
jQuery.cookie=function(b,j,m){
	if(typeof j!="undefined"){
	m=m||{
}
;
	if(j===null){
	j="";
	m.expires=-1}
var e="";
	if(m.expires&&(typeof m.expires=="number"||m.expires.toUTCString)){
	var f;
	if(typeof m.expires=="number"){
	f=new Date();
	f.setTime(f.getTime()+(m.expires*24*60*60*1000))}
else{
	f=m.expires}
e=";
	expires="+f.toUTCString()}
var l=m.path?";
	path="+(m.path):"";
	var g=m.domain?";
	domain="+(m.domain):"";
	var a=m.secure?";
	secure":"";
	document.cookie=[b,"=",encodeURIComponent(j),e,l,g,a].join("")}
else{
	var d=null;
	if(document.cookie&&document.cookie!=""){
	var k=document.cookie.split(";
	");
	for(var h=0;
	h<k.length;
	h++){
	var c=jQuery.trim(k[h]);
	if(c.substring(0,b.length+1)==(b+"=")){
	d=decodeURIComponent(c.substring(b.length+1));
	break}
}
}
return d}
}
;
	/*form validation @author GeekTantra @date 20 September 2009 */
(function(jQuery){
	var ValidationErrors=new Array();
	jQuery.fn.validate=function(options){
	options=jQuery.extend({
	expression:"return true;
	",message:"",error_class:"ValidationErrors",error_field_class:"ErrorField",tips:"tips",live:true}
,options);
	var SelfID=jQuery(this).attr("id");
	var unix_time=new Date();
	unix_time=parseInt(unix_time.getTime()/1000);
	if(!jQuery(this).parents("form:first").attr("id")){
	jQuery(this).parents("form:first").attr("id","Form_"+unix_time)}
var FormID=jQuery(this).parents("form:first").attr("id");
	if(!((typeof(ValidationErrors[FormID])=="object")&&(ValidationErrors[FormID] instanceof Array))){
	ValidationErrors[FormID]=new Array()}
if(options.live){
	if(jQuery(this).find("input").length>0){
	jQuery(this).find("input").bind("blur",function(){
	if(validate_field("#"+SelfID,options)){
	if(options.callback_success){
	options.callback_success(this)}
}
else{
	if(options.callback_failure){
	options.callback_failure(this)}
}
}
);
	jQuery(this).find("input").bind("focus keypress click",function(){
	jQuery("#"+SelfID).next("."+options.error_class).remove();
	jQuery("#"+SelfID).removeClass(options.error_field_class);
	jQuery("#"+SelfID).nextAll("."+options.tips).show()}
)}
else{
	jQuery(this).bind("blur",function(){
	validate_field(this)}
);
	jQuery(this).bind("focus keypress",function(){
	jQuery(this).next("."+options.error_class).remove();
	jQuery(this).removeClass(options.error_field_class);
	jQuery(this).nextAll("."+options.tips).show()}
)}
}
jQuery(this).parents("form").submit(function(){
	if(validate_field("#"+SelfID)){
	return true}
else{
	return false}
}
);
	function validate_field(id){
	var self=jQuery(id).attr("id");
	var expression="function Validate(){
	"+options.expression.replace(/VAL/g,"jQuery('#"+self+"').val()")+"}
Validate()";
	var validation_state=eval(expression);
	if(validation_state!==true){
	if(jQuery(id).next("."+options.error_class).length==0){
	if(validation_state!==false){
	options.message=validation_state}
jQuery(id).after('<span class="'+options.error_class+'">'+options.message+"</span>");
	jQuery(id).addClass(options.error_field_class);
	jQuery(id).nextAll("."+options.tips).hide()}
if(ValidationErrors[FormID].join("|").search(id)==-1){
	ValidationErrors[FormID].push(id)}
return false}
else{
	for(var i=0;
	i<ValidationErrors[FormID].length;
	i++){
	if(ValidationErrors[FormID][i]==id){
	ValidationErrors[FormID].splice(i,1)}
}
return true}
}
}
;
	jQuery.fn.validated=function(callback){
	jQuery(this).each(function(){
	if(this.tagName=="FORM"){
	jQuery(this).submit(function(){
	if(ValidationErrors[jQuery(this).attr("id")].length==0){
	callback()}
return false}
)}
}
)}
}
)(jQuery);

JS代码(login.js):

$(function(){
	var MTPL='http://www.ziqi518.com/static/css/member/';
	//鎹㈣偆yskj_skinvar yskj_skin='<div class="yskj_dh yskj_skin dn"><ul>';
	yskj_skin+='<li><a href="javascript:void(0);
	" id="skin_01"><img src="'+MTPL+'images/login/yskj_skin01.gif" width="170" height="120" /><h2><input type="radio" class="radio1" name="radio2" checked="checked"/>榛樿</h2></a></li>';
	yskj_skin+='<li><a href="javascript:void(0);
	" id="skin_02"><img src="'+MTPL+'images/login/yskj_skin02.gif" width="170" height="120" /><h2><input type="radio" class="radio1" name="radio2" />绉嬫灚钀藉彾</h2></a></li>'yskj_skin+='<li><a href="javascript:void(0);
	" id="skin_03"><img src="'+MTPL+'images/login/yskj_skin03.gif" width="170" height="120" /><h2><input type="radio" class="radio1" name="radio2" />钃濆ぉ澶ф捣</h2></a></li>';
	yskj_skin+='<li><a href="javascript:void(0);
	" id="skin_04"><img src="'+MTPL+'images/login/yskj_skin04.gif" width="170" height="120" /><h2><input type="radio" class="radio1" name="radio2" />涓浗椋?/h2></a></li>';
	yskj_skin+='<li><a href="javascript:void(0);
	" id="skin_05"><img src="'+MTPL+'images/login/yskj_skin05.gif" width="170" height="120" /><h2><input type="radio" class="radio1" name="radio2" />鍞編鏈堝渾</h2></a></li>';
	yskj_skin+='</ul></div>';
	$('body').append(yskj_skin);
	//閫忔槑搴skj_tmvar yskj_tm='<div class="yskj_dh yskj_tm dn"><ul>';
	yskj_tm+='<li><a href="javascript:void(0);
	" id="opcity01"><img src="'+MTPL+'images/login/yskj_qh_1.gif" width="200" height="138" /><h2><input type="radio" class="radio1" name="radio1" checked="checked"/>榛樿</h2></a></li>';
	yskj_tm+='<li><a href="javascript:void(0);
	" id="opcity02"><img src="'+MTPL+'images/login/yskj_qh_2.gif" width="200" height="138" /><h2><input type="radio" class="radio1" name="radio1" />閫忔槑</h2></a></li>';
	yskj_tm+='</ul></div>';
	$('body').append(yskj_tm);
	$('.run_skin').click(function(event){
	$('.yskj_dh').hide();
	$('.yskj_skin').show();
	event.stopPropagation();
}
);
	$('.run_tm').click(function(event){
	$('.yskj_dh').hide();
	$('.yskj_tm').show();
	event.stopPropagation();
}
);
	$('html,body').click(function(){
	$('.yskj_dh').hide();
}
);
	$('.yskj_dh').click(function(event){
	event.stopPropagation();
}
);
	//鑾峰彇鐒︾偣锛屽彇娑堢劍鐐?$('.txt').bind({
	focus:function(){
	if (this.value == this.defaultValue){
	this.value="";
}
}
,blur:function(){
	if (this.value == ""){
	this.value = this.defaultValue;
}
}
}
);
	//鎹㈣偆 var myskin=$.cookie('myskin');
	//console.log(myskin);
	if(myskin){
	switchskin(myskin);
}
var skini=$('.yskj_skin a');
	skini.click(function(){
	switchskin(this.id);
}
);
	function switchskin(skin){
	$('.yskj_skin a').removeClass('on');
	$('#'+skin).addClass('on');
	$('#'+skin).find('input').attr('checked','checked');
	$('#skin').attr('href',MTPL+skin+'.css');
	$.cookie('myskin',skin,{
	path:'/',expires:365}
)}
//閫忔槑搴?function switchtm(opcity){
	$('.main_bg').removeClass('opcity01');
	$('.main_bg').removeClass('opcity02');
	$('.main_bg').addClass(opcity);
	$('#'+opcity).find('input').attr('checked','checked');
	$.cookie('opcity',opcity,{
	path:'/',expires:365}
)}
var opcity=$.cookie('opcity');
	if(opcity){
	switchtm(opcity);
}
var tmi=$('.yskj_tm a');
	tmi.click(function(){
	switchtm(this.id);
}
);
}
)

CSS代码(vip.css):

/* CSS Document */
@import url("common.css");.ValidationErrors{padding-left:5px;}
.u-btn-red{height:30px;line-height:30px;}
html,body{width:100%;height:100%;overflow:hidden;margin:0;}
.main{width:616px;height:416px;position:absolute;top:50%;left:50%;margin-left:-308px;margin-top:-208px;font-size:0;}
.main_t{height:8px;width:100%;background:url(./images/login/main_t.png) 0 0 no-repeat;}
.main_m{min-height:400px;_height:400px;overflow:visible;width:100%;background:url(./images/login/main_m.png) 0 0 repeat-y;font-size:12px;overflow:hidden;}
.main_b{height:8px;width:100%;background:url(./images/login/main_b.png) 0 0 no-repeat;}
.main_bd{width:600px;position:relative;top:0;left:0;margin:0 auto;}
.main_bg{position:absolute;width:100%;height:100%;background:#fff;top:0;left:0;z-index:-1;padding-bottom:1000px;}
.opcity01{filter:alpha(opacity=100);opacity:1;}
.opcity02{filter:alpha(opacity=10);opacity:0.1;}
.run{position:absolute;top:10px;right:10px;}
.run .a1,.run .a2{display:inline-block;width:18px;height:18px;line-height:18px;background:url(./images/login/run2.png) no-repeat;}
.run .a1{background-position:0 0;margin-right:5px;}
.run .a2{background-position:-25px 0;}
.run .a1:hover{background-position:0 -18px;}
.run .a2:hover{background-position:-25px -18px;}
.yskj span{margin-left:5px;font-size:12px;color:#F00}
.yskj_tt{height:60px;width:100%;border-bottom:1px solid #eee;}
.yskj_tt b{font-size:20px;line-height:60px;padding-left:22px;font-weight:normal;color:#606060;}
.yskj_dh{position:absolute;top:50%;left:50%;margin-top:-140px;background:#fff;box-shadow:0 0 3px 3px rgba(0,0,0,0.1);z-index:99;}
.yskj_dh{padding:20px;overflow:hidden;}
.yskj_dh ul{margin-right:-30px;overflow:hidden;}
.yskj_dh li{margin-right:30px;display:inline-block;*display:inline;*zoom:1}
.yskj_dh li a{display:block;width:206px;text-decoration:none;}
.yskj_dh li a img{padding:2px;display:block;border:1px solid #eee;width:200px;height:138px;}
.yskj_dh li a h2{font-weight:normal;text-align:center;margin-top:10px;}
.yskj_dh li a h2 input{vertical-align:-2px;margin-right:5px;*vertical-align:0px;}
.yskj_dh li a:hover img,.yskj_dh li a.on img{border:1px solid #2569a4;}
.yskj_dh li a:hover h2,.yskj_dh li a.on h2{color:#2569a4;text-decoration:none;}
.yskj_tm{margin-left:-250px;}
.yskj_skin{margin-left:-520px;width:1016px;}
.yskj_skin li a{width:176px;}
.yskj_skin li a img{width:170px;height:120px;}
.step1 .yskj_bd .ul{padding-top:30px;font-size:14px;}
.step1 .yskj_bd .ul li{height:40px;line-height:40px;margin-bottom:15px;}
.step1 .yskj_bd .ul li label{vertical-align:middle;display:inline-block;width:140px;text-align:right;}
.step1 .yskj_bd .ul li .txt1,.step1 .yskj_bd .ul li .txt2{width:300px;height:40px;border:1px solid #eee;background:#fff;line-height:40px;text-indent:10px;color:#909090;vertical-align:middle;}
.step1 .yskj_bd .ul li .txt2{width:140px;}
.step1 .yskj_bd .p1{padding-left:125px;}
.step1 .yskj_bd .p1 .btn1{vertical-align:-2px;margin-right:5px;*vertical-align:0px;}
.step1 .yskj_bd .p1 a{color:#0064b4;font-size:12px;}
.step1 .yskj_bd .reg{margin-top:35px;width:100%;text-align:center;margin-bottom:20px;}
.step1 .yskj_bd .reg .btn2,.step1 .yskj_bd .reg .btn3{background:url(./images/login/step2_jh.jpg) no-repeat;height:40px;line-height:40px;font-size:18px;color:#fff;border:0 none;cursor:pointer;display:inline-block;vertical-align:middle;text-decoration:none;font-family:"寰蒋闆呴粦"}
.step1 .yskj_bd .reg .btn2{width:240px}
.step1 .yskj_bd .reg .btn3{background:url(./images/login/step3_2.jpg) repeat-x;width:98px;color:#606060;margin-left:10px;border-left:1px solid #e0e0e0;border-right:1px solid #e0e0e0}
.step1 .yskj_bd .reg .btn3:hover{text-decoration:none}
.step2 .yskj_tt b{color:#1ea019;}
.step2 .yskj_bd{padding-top:68px;}
.step2 .yskj_bd p{text-align:center;font-size:18px;color:#000;margin-bottom:40px;}
.step2 .yskj_bd p em{color:#dc0000;font-size:24px;margin:0 3px;}
.step2 .yskj_bd p i{color:#0064b4;margin-left:3px;}
.step2 .yskj_bd .login{margin-top:70px;width:100%;text-align:center;}
.step2 .yskj_bd .login .btn2{background:url(./images/login/step2_jh.jpg) no-repeat;width:300px;height:40px;line-height:40px;font-size:18px;color:#fff;border:0 none;cursor:pointer;display:inline-block;text-decoration:none;}
.step3 .yskj_bd{padding-left:130px;}
.step3 .yskj_bd .ul{padding-top:65px;}
.step3 .yskj_bd .ul li{height:40px;line-height:40px;margin-bottom:20px;font-size:0;}
.step3 .yskj_bd .ul li .txt1,.step3 .yskj_bd ul li .txt2{width:338px;height:38px;line-height:38px;border:1px solid #eee;text-indent:40px;color:#909090;font-size:14px;}
.step3 .yskj_bd .ul li .txt1{background:#fff url(./images/login/step3_ico1.gif) 10px center no-repeat;}
.step3 .yskj_bd .ul li .txt2{background:#fff url(./images/login/step3_ico2.gif) 10px center no-repeat;}
.step3 .yskj_bd .ul li i{vertical-align:top;width:1px;display:inline-block;margin-left:-1px;height:100%;}
.step3 .yskj_bd .p1{width:340px;color:#000;}
.step3 .yskj_bd .p1 .btn1{vertical-align:-2px;margin-right:5px;*vertical-align:0px;}
.step3 .yskj_bd .p1 a{float:right;color:#0064b4;}
.step3 .yskj_bd .login{margin-top:35px;width:340px;margin-bottom:20px;}
.step3 .yskj_bd .login .a1,.step3 .yskj_bd .login .a2{height:40px;line-height:40px;text-align:center;font-size:18px;border:0 none;cursor:pointer;display:inline-block;text-decoration:none;font-family:"寰蒋闆呴粦"}
.step3 .yskj_bd .login .a1{background:url(./images/login/step3_1.jpg) repeat-x;width:220px;color:#fff;}
.step3 .yskj_bd .login .a2{background:url(./images/login/step3_2.jpg) repeat-x;width:98px;float:right;border-left:1px solid #e0e0e0;border-right:1px solid #e0e0e0;}
.step3 .yskj_bd .login .a1:hover,.step3 .yskj_bd .login .a2:hover{text-decoration:none}
.step3 .yskj_bd .p2{width:340px;}
.step3 .yskj_bd .p2 li{float:left;width:50%;}
.step3 .yskj_bd .p2 li b{color:#808080;margin-right:5px;}
.step3 .yskj_bd .p2 li a{color:#909090;}
.yskj_bd .other_login{color:#808080;margin-bottom:10px;}
.yskj_bd .other_login img{vertical-align:-2px;margin-right:5px;}
.step4 .yskj_bd .ul{padding-left:125px;padding-top:50px;font-size:14px;}
.step4 .yskj_bd .ul li{height:40px;line-height:40px;margin-bottom:20px;}
.step4 .yskj_bd .ul li label{vertical-align:middle;color:#000;}
.step4 .yskj_bd .ul li .txt1{width:300px;height:40px;border:1px solid #eee;background:#fff;line-height:40px;text-indent:10px;color:#909090;vertical-align:middle;}
.step4 .yskj_bd .p1{margin-top:40px;width:100%;text-align:center;}
.step4 .yskj_bd .p1 .btn1{background:url(./images/login/step4.jpg) repeat-x;width:300px;height:40px;line-height:40px;font-size:18px;color:#fff;border:0 none;cursor:pointer;display:inline-block;text-decoration:none;}
.step5 .p1{width:500px;margin:35px auto 0;line-height:30px;color:#000;font-size:14px;text-indent:2em;}
.step5 .p2{width:500px;margin:15px auto;height:40px;}
.step5 .p2 label{vertical-align:middle;line-height:40px;color:#000;}
.step5 .p2 .txt1,.step5 .p2 .txt2{height:38px;line-height:38px;background:#fff;border:1px solid #eee;vertical-align:middle;text-indent:5px;}
.step5 .p2 .txt1{width:120px;}
.step5 .p2 .txt2{width:200px;}
.step5 .p3{text-align:center;margin-bottom:15px;}
.step5 .p3 img{display:inline-block;vertical-align:top;border:1px solid #eee;padding:4px;background:#fff;}
.step5 .p4{text-align:center;margin-bottom:30px;}
.step5 .p4 .a1,.step5 .p4 .a2{display:inline-block;width:160px;height:40px;line-height:40px;text-align:center;color:#fff;border:0 none;text-decoration:none;font-size:18px;cursor:pointer;}
.step5 .p4 .a1{background:url(./images/login/step4.jpg) repeat-x;margin-right:10px;}
.step5 .p4 .a2{background:url(./images/login/step1_zc.jpg) repeat-x;}

附件:下载该文件资源,减少时间成本(增值服务)