jq网页换肤效果
网页换肤效果比较常见的:
效果:
点击上面的颜色列表,下面的内容会相应的展示对应的颜色出来.如果想要实现记录当前浏览器选中的颜色,刷新页面之后颜色保留在当前,就要用cookie去记录.
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
/*公共*/
#skin { border: 1px solid #ccc; padding: 16px 24px;background: #000; overflow: hidden; }
#skin li { position: relative; width: 32px; height: 32px; display: inline-block;
margin-right:20px; float: left; text-indent: -99999px; border-radius: 3px;
cursor: pointer; }
#skin li#skin_0 { background: #666; }
#skin li#skin_1 { background: #EE00EE; }
#skin li#skin_2 { background: #FF3030; }
#skin li#skin_3 { background: #63B8FF; }
#skin li#skin_4 { background: #FF8C00; }
#skin li#skin_5 { background: #B4EEB4; }
#skin li.selected,#skin li:hover { border-color:#fff;}
#div_side_0 .title,#div_side_1 .title { font-size: 14px; color: #fff; padding: 8px 16px; float: left; display: inline-block; margin: 20px; }
#skin li:after {
content: '';
position: absolute;
z-index: 20;
top: 50%;
left: 50%;
width: 1px;
height: 0;
border: 1px solid #f2f2f2;
transition: all .3s;
-webkit-transition: all .3s;
opacity: 0;
}
#skin li.selected:after, #skin li:hover:after {
width: 100%;
height: 100%;
padding: 4px;
top: -5px;
left: -5px;
border-color: #5FB878;
opacity: 1;
}
</style>
<link rel="stylesheet" type="text/css" href="css/skin_0.css" id="cssfile">
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
</head>
<body>
<ul id="skin">
<li id="skin_0" title="灰色" class="selected">灰色</li>
<li id="skin_1" title="紫色">紫色</li>
<li id="skin_2" title="红色">红色</li>
<li id="skin_3" title="天蓝色">天蓝色</li>
<li id="skin_4" title="橙色">橙色</li>
<li id="skin_5" title="淡绿色">淡绿色</li>
</ul>
<div id="div_side_0">
<div id="news">
<h1 class="title">时事新闻</h1>
</div>
</div>
<div id="div_side_1">
<div id="game">
<h1 class="title">娱乐新闻</h1>
</div>
</div>
<script>
/*cookie刷新页面之后,仍然可以记录当前点击的皮肤*/
$(function () {
var $li=$("#skin li");
$li.click(function () {
/* $("#"+this.id).addClass("selected").siblings().removeClass("selected");
$("#cssfile").attr("href","css/"+this.id+".css");*/
switchSkin(this.id);
})
var cookie_skin=$.cookie("MyCssSkin");
if(cookie_skin){
switchSkin(cookie_skin);
}
})
function switchSkin(skinName) {
$("#"+skinName).addClass("selected").siblings().removeClass("selected");
$("#cssfile").attr("href","css/"+skinName+".css");
$.cookie("MyCssSkin",skinName,{path:'/',expires:10});
}
</script>
</body>
</html>上面的代码就是网页换肤效果的.
本文作者： Jasmine
本文链接： https://www.jianbaizhan.com/article/628
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！