个人博客—换肤

个人博客—换肤

• 点击换肤按钮

点击换肤按钮

• 获取后台皮肤列表

获取皮肤列表

• 点击皮肤列表中图片

点击皮肤列表中图片

• 换肤成功

换肤成功

html部分

<!-- 换肤弹窗 -->
<form id="skin" title="更换皮肤"></form>
<!-- /换肤弹窗 -->

js部分

    //更换皮肤弹窗
    $('#header .skinbtn').on("click",function () {
        $('#skin').dialog('open');
        $('#skin').html('<span class="loading"></span>');
        get_skin();
    });
    $('#skin').dialog({
        autoOpen : false,
        modal : true,
        resizable : false,
        width : 670,
        height : 360,
    });
    // 获取皮肤列表函数
    function get_skin(){
        $.ajax({
            method : 'post',
            url : 'php/get_skin.php',
            data : {
                'type' : 'all'
            },
            success : function (text) {
                var json = JSON.parse(text);
                var html = '';
                for (var i = 0; i < json.length; i ++) {
                    html += '<dl><dt><img src="img/' + json[i].small_bg 
                    + '" big_bg="' + json[i].big_bg + '" bg_color="' 
                    + json[i].bg_color + '" alt=""></dt><dd>' 
                    + json[i].bg_text + '</dd></dl>';
                }
                $('#skin').html(html).fadeIn();
                $('#skin dl dt img').on("click",function () {
                    var _this = this;
                    $(this).ajaxSubmit({
                        method : 'post',
                        url : 'php/get_skin.php',
                        data : {
                            'type' : 'set',
                            'big_bg' : $(_this).attr('big_bg')
                        },
                        beforeSubmit : function(){
                            $('#loading').dialog('open');
                        },
                        success : function (text) {
                            $('body').css('background', $(_this).attr('bg_color') 
                                + ' ' + 'url(img/' + $(_this).attr('big_bg') + ') repeat-x');
                            $('#loading').css('background', 'url(img/success.gif) no-repeat 20px center').html('皮肤更换成功！');
                            setTimeout(function () {
                                $('#loading').dialog('close');
                                $('#loading').css('background', 'url(img/loading.gif) no-repeat 20px center').html('数据交互中...');
                            }, 1000);
                        },
                        async : false
                    });
                });
            }
        });
    }
    //默认显示背景样式
    $.ajax({
        method : 'post',
        url : 'php/get_skin.php',
        data : {
            'type' : 'main'
        },
        success : function (text) {
            var json = JSON.parse(text);
            $('body').css('background', json.bg_color + ' ' + 'url(img/' + json.big_bg + ') repeat-x');
        },
    });

php部分

<?php
require 'config.php';

if ($_POST['type'] == 'all') {
    
    $query = mysql_query("SELECT small_bg,big_bg,bg_color,bg_text FROM blog_skin LIMIT 0,6") or die('SQL错误！');
    
    $json = '';
    
    while (!!$row = mysql_fetch_array($query, MYSQL_ASSOC)) {
        $json .= json_encode($row).',';
    }
    
    echo '['.substr($json, 0 , strlen($json) - 1).']';

} else if ($_POST['type'] == 'main') {
    
    $query = mysql_query("SELECT big_bg,bg_color FROM blog_skin WHERE bg_flag=1") or die('SQL错误！');
    
    echo json_encode(mysql_fetch_array($query, MYSQL_ASSOC));
    
} else if ($_POST['type'] == 'set') {

    mysql_query("UPDATE blog_skin SET bg_flag=0 WHERE bg_flag=1") or die('SQL错误！');
    mysql_query("UPDATE blog_skin SET bg_flag=1 WHERE big_bg='{$_POST['big_bg']}'") or die('SQL错误！');
    
    echo mysql_affected_rows();
}

mysql_close();
?>

代码在Github：个人博客