<style type="text/css">
.themePreview a {
    display: block;
    text-decoration: none;
    outline-style: none
}

.themePreview a.top_stick01 {
    width: 30px;
    height: 100px;
    background: url(__STATIC__/addons/returntop/images/01.png)
}

.themePreview a.top_stick02 {
    width: 48px;
    height: 49px;
    background: url(__STATIC__/addons/returntop/images/02.png)
}

.themePreview a.top_stick02:hover {
    background-position: -48px 0px
}

.themePreview a.top_stick03 {
    width: 56px;
    height: 37px;
    background: url(__STATIC__/addons/returntop/images/03.gif);
}

.themePreview a.top_stick03:hover {
    background-position: -56px 0px;
}

.themePreview a.top_stick04 {
    width: 53px;
    height: 41px;
    background: url(__STATIC__/addons/returntop/images/04.png);
}

.themePreview a.top_stick04:hover {
    background-position: -52px 0px;
}

.themePreview a.top_stick05 {
    width: 50px;
    height: 50px;
    background: url(__STATIC__/addons/returntop/images/05.png);
}

.themePreview a.top_stick06 {
    width: 53px;
    height: 65px;
    background: url(__STATIC__/addons/returntop/images/06.png);
}

.themePreview a.top_stick06:hover {
    background-position: 0px -67px;
}

.themePreview a.top_stick07 {
    width: 47px;
    height: 47px;
    background: url(__STATIC__/addons/returntop/images/07.gif);
}

.themePreview a.top_stick08 {
    width: 36px;
    height: 33px;
    background: url(__STATIC__/addons/returntop/images/08.gif);
}

.themePreview a.top_stick09 {
    width: 50px;
    height: 50px;
    background: url(__STATIC__/addons/returntop/images/09.gif);
}

.themePreview a.top_stick010 {
    width: 35px;
    height: 35px;
    background: url(__STATIC__/addons/returntop/images/010.png);
}

.themePreview a.top_stick010:hover {
    background-position: -35px 0px
}

.themePreview a.top_stick011 {
    width: 106px;
    height: 14px;
    background: url(__STATIC__/addons/returntop/images/011.jpg);
}

.themePreview a.top_stick012 {
    width: 56px;
    height: 56px;
    background: url(__STATIC__/addons/returntop/images/012.gif);
    background-position: 0px -40px
}

.themePreview a.top_stick012:hover {
    background-position: 0px -100px
}

.themePreview a.top_stick013 {
    width: 52px;
    height: 26px;
    background: url(__STATIC__/addons/returntop/images/013.png);
}

.themePreview a.top_stick013:hover {
    background-position: 0px -26px
}

.themePreview a.top_stick014 {
    width: 76px;
    height: 18px;
    background: url(__STATIC__/addons/returntop/images/014.jpg);
}

.themePreview a.top_stick015 {
    width: 51px;
    height: 51px;
    background: url(__STATIC__/addons/returntop/images/015.png);
}

.themePreview a.top_stick015:hover {
    background-position: 0px -51px
}

.themePreview a.top_stick016 {
    width: 50px;
    height: 50px;
    background: url(__STATIC__/addons/returntop/images/016.png);
}

.themePreview a.top_stick016:hover {
    background-position: 0px -50px
}

.themePreview a.top_stick017 {
    width: 100px;
    height: 100px;
    background: url(__STATIC__/addons/returntop/images/017.png);
}

.themePreview a.top_stick018 {
    width: 21px;
    height: 80px;
    background: url(__STATIC__/addons/returntop/images/018.png);
}

.themePreview a.top_stick019 {
    width: 35px;
    height: 45px;
    background: url(__STATIC__/addons/returntop/images/019.gif);
}

.themePreview a.top_stick020 {
    width: 50px;
    height: 50px;
    background: url(__STATIC__/addons/returntop/images/020.png);
}

.themePreview a.top_stick020:hover {
    background-position: -50px 0px
}

.themePreview a.top_stick021 {
    width: 25px;
    height: 69px;
    background: url(__STATIC__/addons/returntop/images/021.png);
}

.themePreview a.top_stick022 {
    width: 19px;
    height: 62px;
    background: url(__STATIC__/addons/returntop/images/022.png);
}

.themePreview a.top_stick023 {
    width: 138px;
    height: 37px;
    background: url(__STATIC__/addons/returntop/images/023.gif);
}

.themePreview a.top_stick024 {
    width: 22px;
    height: 70px;
    background: url(__STATIC__/addons/returntop/images/024.png);
}

.themePreview a.top_stick025 {
    width: 32px;
    height: 11px;
    background: url(__STATIC__/addons/returntop/images/025.gif);
}

.themePreview a.top_stick026 {
    width: 71px;
    height: 71px;
    background: url(__STATIC__/addons/returntop/images/026.png);
}

.themePreview a.top_stick027 {
    width: 30px;
    height: 100px;
    background: url(__STATIC__/addons/returntop/images/027.gif);
}

.themePreview a.top_stick027:hover {
    background-position: 0px -100px
}

.themePreview a.top_stick028 {
    width: 19px;
    height: 77px;
    background: url(__STATIC__/addons/returntop/images/028.gif);
}

.themePreview a.top_stick029 {
    width: 50px;
    height: 50px;
    background: url(__STATIC__/addons/returntop/images/029.png);
}

.themePreview a.top_stick029:hover {
    background-position: 0px -50px
}

.themePreview a.top_stick030 {
    width: 100px;
    height: 100px;
    background: url(__STATIC__/addons/returntop/images/030.png);
}

.themePreview a.top_stick031 {
    width: 44px;
    height: 44px;
    background: url(__STATIC__/addons/returntop/images/031.png);
}

.themePreview a.top_stick032 {
    width: 54px;
    height: 54px;
    background: url(__STATIC__/addons/returntop/images/032.png);
}

.themePreview a.top_stick033 {
    width: 55px;
    height: 55px;
    background: url(__STATIC__/addons/returntop/images/033.png);
}

.themePreview a.top_stick033:hover {
    background-position: 0px -54px
}

.themePreview a.top_stick034 {
    width: 23px;
    height: 72px;
    background: url(__STATIC__/addons/returntop/images/034.png);
}

.themePreview a.top_stick035 {
    width: 48px;
    height: 82px;
    background: url(__STATIC__/addons/returntop/images/035.png);
}

.themePreview a.top_stick036 {
    width: 60px;
    height: 36px;
    background: url(__STATIC__/addons/returntop/images/036.gif);
}

.themePreview a.top_stick037 {
    width: 41px;
    height: 42px;
    background: url(__STATIC__/addons/returntop/images/037.png);
}

.themePreview a.top_stick038 {
    width: 67px;
    height: 114px;
    background: url(__STATIC__/addons/returntop/images/038.gif);
}

.themePreview a.top_stick039 {
    width: 18px;
    height: 99px;
    background: url(__STATIC__/addons/returntop/images/039.png);
}

.themePreview a.top_stick039:hover {
    background-position: -18px 0px;
}

.themePreview a.top_stick040 {
    width: 36px;
    height: 65px;
    background: url(__STATIC__/addons/returntop/images/040.png);
}

.themePreview a.top_stick040:hover {
    background-position: 0px -65px;
}

.themePreview a.top_stick041 {
    width: 108px;
    height: 108px;
    background: url(__STATIC__/addons/returntop/images/041.png);
}

.themePreview a.top_stick042 {
    width: 25px;
    height: 120px;
    background: url(__STATIC__/addons/returntop/images/042.png);
}

.themePreview a.top_stick043 {
    width: 21px;
    height: 65px;
    background: url(__STATIC__/addons/returntop/images/043.png);
}

.themePreview a.top_stick044 {
    width: 20px;
    height: 50px;
    background: url(__STATIC__/addons/returntop/images/044.png);
}

.themePreview a.top_stick045 {
    width: 48px;
    height: 75px;
    background: url(__STATIC__/addons/returntop/images/045.png);
}

.themePreview a.top_stick045:hover {
    background-position: -48px 0px;
}

.themePreview a.top_stick046 {
    width: 37px;
    height: 69px;
    background: url(__STATIC__/addons/returntop/images/046.gif);
}

.themePreview a.top_stick047 {
    width: 50px;
    height: 50px;
    background: url(__STATIC__/addons/returntop/images/047.png);
}

.themePreview a.top_stick048 {
    width: 60px;
    height: 26px;
    background: url(__STATIC__/addons/returntop/images/048.gif);
}

.themePreview a.top_stick049 {
    width: 34px;
    height: 10px;
    background: url(__STATIC__/addons/returntop/images/049.gif);
}

.themePreview a.top_stick050 {
    width: 56px;
    height: 28px;
    background: url(__STATIC__/addons/returntop/images/050.gif);
}

.themePreview a.top_stick051 {
    width: 30px;
    height: 29px;
    background: url(__STATIC__/addons/returntop/images/051.gif);
}

.themePreview a.top_stick052 {
    width: 11px;
    height: 32px;
    background: url(__STATIC__/addons/returntop/images/052.gif);
}

.themePreview a.top_stick053 {
    width: 17px;
    height: 15px;
    background: url(__STATIC__/addons/returntop/images/053.gif);
}

.themePreview a.top_stick054 {
    width: 41px;
    height: 20px;
    background: url(__STATIC__/addons/returntop/images/054.gif);
}

.themePreview a.top_stick055 {
    width: 37px;
    height: 14px;
    background: url(__STATIC__/addons/returntop/images/055.gif);
}

.themePreview a.top_stick056 {
    width: 41px;
    height: 13px;
    background: url(__STATIC__/addons/returntop/images/056.gif);
}

.themePreview a.top_stick057 {
    width: 64px;
    height: 11px;
    background: url(__STATIC__/addons/returntop/images/057.gif);
}

.themePreview a.top_stick058 {
    width: 38px;
    height: 13px;
    background: url(__STATIC__/addons/returntop/images/058.gif);
}

.themePreview a.top_stick059 {
    width: 36px;
    height: 13px;
    background: url(__STATIC__/addons/returntop/images/059.gif);
}

.themePreview a.top_stick060 {
    width: 20px;
    height: 13px;
    background: url(__STATIC__/addons/returntop/images/060.gif);
}

.themePreview a.top_stick061 {
    width: 35px;
    height: 24px;
    background: url(__STATIC__/addons/returntop/images/061.gif);
}

.themePreview a.top_stick062 {
    width: 59px;
    height: 14px;
    background: url(__STATIC__/addons/returntop/images/062.gif);
}

.themePreview a.top_stick063 {
    width: 13px;
    height: 38px;
    background: url(__STATIC__/addons/returntop/images/063.gif);
}

.themePreview a.top_stick064 {
    width: 31px;
    height: 11px;
    background: url(__STATIC__/addons/returntop/images/064.gif);
}

.themePreview a.top_stick065 {
    width: 19px;
    height: 57px;
    background: url(__STATIC__/addons/returntop/images/065.png);
}

.themePreview a.top_stick065:hover {
    background-position: -19px 0px
}

.themePreview a.top_stick066 {
    width: 19px;
    height: 63px;
    background: url(__STATIC__/addons/returntop/images/066.png);
}

.themePreview a.top_stick067 {
    width: 14px;
    height: 18px;
    background: url(__STATIC__/addons/returntop/images/067.gif);
}

.themePreview a.top_stick068 {
    width: 56px;
    height: 56px;
    background: url(__STATIC__/addons/returntop/images/068.png);
}

.themePreview a.top_stick068:hover {
    background-position: -64px 0px
}

.themePreview a.top_stick069 {
    width: 46px;
    height: 46px;
    background: url(__STATIC__/addons/returntop/images/069.png);
}

.themePreview a.top_stick069:hover {
    background-position: 0px -47px
}

.themePreview a.top_stick070 {
    width: 30px;
    height: 82px;
    background: url(__STATIC__/addons/returntop/images/070.png);
}

.themePreview a.top_stick071 {
    width: 50px;
    height: 50px;
    background: url(__STATIC__/addons/returntop/images/071.gif);
}

.themePreview a.top_stick072 {
    width: 44px;
    height: 44px;
    background: url(__STATIC__/addons/returntop/images/072.gif);
}

.themePreview a.top_stick073 {
    width: 62px;
    height: 62px;
    background: url(__STATIC__/addons/returntop/images/073.gif);
}

.themePreview a.top_stick074 {
    width: 34px;
    height: 34px;
    background: url(__STATIC__/addons/returntop/images/074.png);
}

.themePreview a.top_stick074:hover {
    background-position: 0px -34px
}

.themePreview a.top_stick075 {
    width: 53px;
    height: 49px;
    background: url(__STATIC__/addons/returntop/images/075.jpg);
}

.themePreview a.top_stick076 {
    width: 19px;
    height: 67px;
    background: url(__STATIC__/addons/returntop/images/076.png);
}

.themePreview a.top_stick077 {
    width: 35px;
    height: 16px;
    background: url(__STATIC__/addons/returntop/images/077.gif);
}

.themePreview a.top_stick078 {
    width: 56px;
    height: 60px;
    background: url(__STATIC__/addons/returntop/images/078.gif);
}

.themePreview a.top_stick079 {
    width: 49px;
    height: 67px;
    background: url(__STATIC__/addons/returntop/images/079.gif);
}

.themePreview a.top_stick080 {
    width: 72px;
    height: 72px;
    background: url(__STATIC__/addons/returntop/images/080.gif);
}

.themePreview a.top_stick080:hover {
    background-position: -88px 0px
}

.themePreview a.top_stick081 {
    width: 36px;
    height: 20px;
    background: url(__STATIC__/addons/returntop/images/081.jpg);
}

.themePreview a.top_stick082 {
    width: 55px;
    height: 55px;
    background: url(__STATIC__/addons/returntop/images/082.png);
}

.themePreview a.top_stick083 {
    width: 40px;
    height: 13px;
    background: url(__STATIC__/addons/returntop/images/083.gif);
}

.themePreview a.top_stick084 {
    width: 46px;
    height: 22px;
    background: url(__STATIC__/addons/returntop/images/084.jpg);
}

.themePreview a.top_stick085 {
    width: 76px;
    height: 76px;
    background: url(__STATIC__/addons/returntop/images/085.png);
}

.themePreview a.top_stick085:hover {
    background-position: 0px -75px
}

.themePreview a.top_stick086 {
    width: 28px;
    height: 29px;
    background: url(__STATIC__/addons/returntop/images/086.gif);
}

.themePreview a.top_stick087 {
    width: 70px;
    height: 70px;
    background: url(__STATIC__/addons/returntop/images/087.png);
}

.themePreview a.top_stick087:hover {
    background-position: -70px 0px
}

.themePreview a.top_stick088 {
    width: 45px;
    height: 46px;
    background: url(__STATIC__/addons/returntop/images/088.gif);
}

.themePreview a.top_stick089 {
    width: 41px;
    height: 131px;
    background: url(__STATIC__/addons/returntop/images/089.gif);
}

.themePreview a.top_stick090 {
    width: 28px;
    height: 103px;
    background: url(__STATIC__/addons/returntop/images/090.png);
}

.themePreview a.top_stick090:hover {
    background-position: 0px -103px
}

.themePreview a.top_stick091 {
    width: 40px;
    height: 40px;
    background: url(__STATIC__/addons/returntop/images/091.png);
}

.themePreview a.top_stick091:hover {
    background-position: 0px -40px
}

.themePreview a.top_stick092 {
    width: 51px;
    height: 51px;
    background: url(__STATIC__/addons/returntop/images/092.gif);
}

.themePreview a.top_stick092:hover {
    background-position: 0px -51px
}

.themePreview a.top_stick093 {
    width: 52px;
    height: 52px;
    background: url(__STATIC__/addons/returntop/images/093.gif);
}

.themePreview a.top_stick094 {
    width: 36px;
    height: 36px;
    background: url(__STATIC__/addons/returntop/images/094.gif);
}

.themePreview a.top_stick095 {
    width: 57px;
    height: 14px;
    background: url(__STATIC__/addons/returntop/images/095.gif);
}

.themePreview a.top_stick096 {
    width: 23px;
    height: 23px;
    background: url(__STATIC__/addons/returntop/images/096.gif);
}

.themePreview a.top_stick097 {
    width: 35px;
    height: 50px;
    background: url(__STATIC__/addons/returntop/images/097.gif);
}

.themePreview a.top_stick098 {
    width: 44px;
    height: 72px;
    background: url(__STATIC__/addons/returntop/images/098.png);
}

.themePreview a.top_stick099 {
    width: 79px;
    height: 64px;
    background: url(__STATIC__/addons/returntop/images/099.png);
}

.themePreview .colorBox {
    border: 2px solid #FFF;
    height: 100px;
    padding: 10px;
    margin: 10px;
    float: left;
    margin-left: 10px;
    text-align: center;
    cursor: pointer;
}

.themePreview .colorBox:hover,
.themePreview .colorBox.current {
    border: 2px solid #000;
}
</style>
<div class="layui-card">
    <div class="layui-card-header">插件配置</div>
    <div class="layui-card-body">
    	<div class="layui-form-item">
    		<label>是否开启随机</label>
    		<div class="layui-form-field-label">
    		<input type="radio" name="config[random]" value="1" title="开启" {eq name="data.config.0.value" value="1" }checked=checked{/eq}>
            <input type="radio" name="config[random]" value="0" title="关闭" {eq name="data.config.0.value" value="0" }checked=checked{/eq}>
            </div>
            <div class="layui-form-mid layui-word-aux">开启随机用户每次刷新，回到顶部样式将会随机变化，开启时指定样式失效</div>
		</div>
		<div class="layui-form-item">
			<label>指定样式</label>
			<div class="opt themePreview">
			        {php}for($i=1;$i<=99;$i++){{/php}
			        <div class="colorBox {eq name="i" value="$data.config.1.value" }current{/eq}" onclick="fChange('{$i}',$(this));">
			            <a href="javascript:;" class="top_stick0{$i}">&nbsp;</a>
			        </div>
			        {php}}{/php}
			        <div class="layui-clear"></div>
			    </div>
		</div>
		<input type="hidden" value="{$data.config.1.value}" name="config[current]" id="default" />
    </div>
</div>
<script type="text/javascript">
layui.use('form', function(){
	var form = layui.form;
});
/**
 * 改变选中样式
 * @param string key 选中样式Key值
 * @param object this 点击按钮对象
 * @return void
 */
var fChange = function(key, obj) {
	console.log(key);
    $('.themePreview').find('.colorBox').removeClass('current');
    $(obj).addClass('current');
    $('#default').val(key);
    return false;
}
</script>