50.项目 1-博客前端：封装库--Ajax 换肤

学习要点：

1.问题所在
2.设置代码

本课是这个项目的最后一个功能，实现博客更换皮肤的功能，而且可以永久保存到数据
库中。

一．问题所在

QQ截图20190520093907.png

二．设置代码

//HTML 代码

更换皮肤

//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('');
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 += '
' + json[i].bg_text + '
';
}
$('#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

QQ截图20190520094231.png

感谢收看本次教程！