首页 > 代码库 > 网页变肤色
网页变肤色
<!DOCTYPE html>
<html>
<head>
<title>网页换肤</title>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery.cookie.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/skin_0.css" id="cssfile">
<style type="text/css">
ul ,ul li{
list-style: none;
margin:0;
padding:0;
}
.container{
width: 400px;
padding: 10px;
margin:0 auto;
border: 1px solid #999;
overflow: hidden;
}
.skin{
overflow: hidden;
}
.skin li{
float:left;
margin-right:5px;
width:15px;
height:15px;
/*text-indent:-999px;*/
/*overflow:hidden;*/
display:block;
cursor:pointer;
background-image:url(img/theme.gif);
position: relative;
}
.skin li input[type="checkbox"]{
position: absolute;
left: 0;
top: 0;
margin:0;
width:15px;
height:15px;
}
.slide_1,.slide_2{
float: left;
width: 160px;
margin: 10px 10px;
text-align: center;
}
#skin_0{
background-position:0px 0px;
}
#skin_1{
background-position:15px 0px;
}
#skin_2{
background-position:35px 0px;
}
#skin_3{
background-position:55px 0px;
}
#skin_4{
background-position:75px 0px;
}
#skin_5{
background-position:95px 0px;
}
#skin_0.selected{
background-position:0px 15px !important;
}
#skin_1.selected{
background-position:15px 15px !important;
}
#skin_2.selected{
background-position:35px 15px !important;
}
#skin_3.selected{
background-position:55px 15px !important;
}
#skin_4.selected{
background-position:75px 15px !important;
}
#skin_5.selected{
background-position:95px 15px !important;
}
</style>
</head>
<body>
<div class="container">
<ul class="skin">
<li id="skin_0" title="灰色"><input type="checkbox" name="" hidden></li>
<li id="skin_1" title="粉色"><input type="checkbox" name="" hidden></li>
<li id="skin_2" title="蓝色"><input type="checkbox" name="" hidden></li>
<li id="skin_3" title="黄色"><input type="checkbox" name="" hidden></li>
<li id="skin_4" title="绿色"><input type="checkbox" name="" hidden></li>
<li id="skin_5" title="绿色"><input type="checkbox" name="" hidden></li>
</ul>
<div class="slide_1">
<div class="news"><h4>时事新闻</h4></div>
</div>
<div class="slide_2">
<div class="game"><h4>娱乐新闻</h4></div>
</div>
</div>
<script type="text/javascript">
var $li=$(".skin li");
$li.click(function() {
$("#"+this.id).addClass(‘selected‘)//当前<li>元素被选中
.siblings().removeClass(‘selected‘);//去掉其他同辈<li>元素的选中
$("#cssfile").attr(‘href‘, ‘css/‘+this.id+‘.css‘);//设置不同肤色
$.cookie("Myskin" , this.id , {path : ‘/‘ , expires:10});//新建cookie
var cookie_skin=$.cookie("Myskin");//获取cookie的值
if(cookie_skin){
$("#"+cookie_skin).addClass(‘selected‘)
.siblings().removeClass(‘selected‘);
$("#cssfile").attr(‘href‘, ‘css/‘+cookie_skin+‘.css‘);
$.cookie("Myskin" , cookie_skin , {path : ‘/‘ , expires:10});
}
}).change(function(event) {
$(this).find(‘:checkbox‘).attr(‘checked‘, true)
.end()
.siblings().find(‘:checkbox‘).attr(‘checked‘, false);
return false;
});
//方法2
$li.click(function() {
cssSkin(this.id);
var cookie_skin=$.cookie("Myskin");//获取cookie的值
if(cookie_skin){
cssSkin(cookie_skin);
}
});
function cssSkin(skinName){
$("#"+skinName).addClass(‘selected‘)
.siblings().removeClass(‘selected‘);
$("#cssfile").attr(‘href‘, ‘css/‘+skinName+‘.css‘);
$.cookie("Myskin" , skinName , {path : ‘/‘ , expires:10});
}
</script>
</body>
</html>
网页变肤色