当前位置：模板网首页 > 特效插件 > 表单按钮 >  可以切换风格和背景正文

特效介绍

可以切换风格和背景的注册表单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>';

可以切换风格和背景的注册表单jQuery代码效果预览 可以切换风格和背景的注册表单jQuery代码本地下载