学习要点：
1.问题所在
2.设置代码
本课是这个项目的最后一个功能，实现博客更换皮肤的功能，而且可以永久保存到数据
库中。
一．问题所在
QQ截图20190520093907.png
二．设置代码
//HTML 代码
<div id="skin">
<h2><img src="images/close.png" alt="" class="close" />更换皮肤</h2>
<div class="skin_bg">
</div>
</div>
//CSS 代码
#skin {
width:650px;
height:360px;
border:1px solid #ccc;
position:absolute;
display:none;
z-index:9999;
background:#fff;
}
#skin h2 {
height:40px;
line-height:40px;
text-align:center;
font-size:14px;
letter-spacing:1px;
color:#666;
background:url(images/login_header.png) repeat-x;
margin:0;
padding:0;
border-bottom:1px solid #ccc;
cursor:move;
}
#skin h2 img {
float:right;
position:relative;
top:14px;
right:8px;
cursor:pointer;
}
#skin div.skin_bg {
position:relative;
}
#skin div.skin_bg span.loading {
display:block;
background:url(images/loading4.gif) no-repeat;
width:100px;
height:20px;
position:absolute;
top:140px;
left:270px
}
#skin dl {
float:left;
padding:12px 0 0 12px;
}
#skin dl dt {
}
#skin dl dt img {
display:block;
cursor:pointer;
}
#skin dl dd {
padding:5px;
text-align:center;
letter-spacing:1px;
}
//JS 代码
//换肤弹窗
$('#skin').center(650, 360).resize(function () {
if ($('#skin').css('display') == 'block') {
screen.lock();
}
});
$('#header .member a').eq(1).click(function () {
$('#skin').center(650, 360).show();
$('#skin .skin_bg').html('<span class="loading"></span>');
screen.lock().animate({
attr : 'o',
target : 30,
t : 30,
step : 10
});
ajax({
method : 'post',
url : '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="images/' + json[i].small_bg +
'" big_bg="images/' + json[i].big_bg + '" bg_color="' +
json[i].bg_color + '"><dt><dd>' + json[i].bg_text + '</dd></dl>';
}
$('#skin .skin_bg').html(html).opacity(0).animate({
attr : 'o',
target : 100,
t : 30,
step : 10
});
$('#skin .skin_bg dl dt img').click(function () {
$('body').css('background', $(this).attr('bg_color') + ' ' +
'url(' + $(this).attr('big_bg') + ') repeat-x');
ajax({
method : 'post',
url : 'get_skin.php',
data : {
'type' : 'set',
'big_bg' : $(this).attr('big_bg').substring(7)
},
success : function (text) {
if (text == 1) {
$('#success').show().center(200, 40);
$('#success p').html('皮肤更换成功...');
setTimeout(function () {
$('#success').hide();
}, 1500);
}
},
async : true
});
});
},
async : true
});
});
$('#skin .close').click(function () {
$('#skin').hide();
screen.animate({
attr : 'o',
target : 0,
t : 30,
step : 10,
fn : function () {
screen.unlock();
}
});
});
//拖拽
$('#skin').drag($('#skin h2').last());
//默认皮肤
ajax({
method : 'post',
url : 'get_skin.php',
data : {
'type' : 'main'
},
success : function (text) {
var json = JSON.parse(text);
$('body').css('background', json.bg_color + ' ' + 'url(images/' +
json.big_bg + ') repeat-x');
},
async : true
});
//get_skin.php
<?php
require 'config.php';
if ($_POST['type'] == 'all') {
$query = mysql_query("SELECT small_bg, big_bg, bg_color, bg_text
FROM blog_skin") 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 small_bg, big_bg, bg_color, bg_text
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();
?>
QQ截图20190520094231.png
