特效介绍
可以切换风格和背景的注册表单jQuery代码,点击表单右上角的皮肤设置按钮,会弹出选择背景的对话框,会有“默认”、“秋风落叶”等五种风格供选择,点击后面的“透明度设置”按钮,可以更换表单的透明度,很实用。
使用方法
1、在head区域引入下面的css文件和js文件:<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"> <script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.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]-->2、在body区域引入下面的html代码:
<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>3、皮肤位置设置:
打开\static\javascript\login.js文件,修改下面的代码:
var MTPL='http://www.ziqi518.com/static/css/member/'; //皮肤位置的前缀 //换肤yskj_skin var 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); //透明度yskj_tm var 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>';