腾讯云·社区
一键换肤的简单实现
以前看到一键换肤的效果很炫酷，其实想一想，实现很简单，于是乎也写一个吧。
上代码：
oneBtnChangeSkin.html ( 引入bootstrap.min.css 和 jquery.js )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="cache-control" content="no-cache"/>
<title>one button to change skin</title>
<link rel="stylesheet" href="dist/bootstrap/css/bootstrap.min.css">
</head>
<body>
<header id="header" class="row navbar-fixed-top" style="border-bottom:1px solid #eee;">
<div class="col-md-1"></div>
<div class="navbar-brand">One Piece</div>
<div class="text-center col-md-9">
<div class="col-md-4"></div>
<div class="col-md-4" style="margin-top:10px;">
<input type="text" class="form-control col-md-12" placeholder="search..." style="padding-right:34px;"/>
<span class="glyphicon glyphicon-search" style="position: absolute;right:25px;top:10px;"></span>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="##" title="Click to change skin" onclick="listShow();" onmouseleave="listHide();">
Skin <span class="glyphicon glyphicon-triangle-bottom"></span>
<div id="SkinList" class="row" style="display:none;position:absolute;width:360px;height:400px;overflow:auto;margin-top:16px;">
</div>
</a>
</li>
<li><a href="##">Home</a></li>
<li><a href="##">About</a></li>
<li><a href="##">Contact</a></li>
</ul>
</div>
</header>
<div class="row" style="margin-top:50px;height:540px;">
<div id="left-box" class="col-md-3" style="height:540px;"></div>
<div id="right-box" class="col-md-9" style="height:540px;"></div>
</div>
<script src="dist/jquery/jquery-3.1.1.min.js"></script>
<script src="javascript/oneBtnChangeSkin.js"></script>
</body>
</html>oneBtnChangeSkin.js
/**
* Created by lonely.dawn on 2017-02-06.
* 一键换肤的简单实现
*/
//模拟后台返回的数据 , 记录各个需要切换样式的点 (这里是简单实现 , 只给出三个 经典ERP布局模块点的变换)
var skins= [{
top:'resources/images/gray-top.jpg',
left:'resources/images/gray-left.jpg',
right:'resources/images/gray-right.jpg',
thumbnail:'resources/images/gray-thumbnail.jpg',
title:'经典雅致灰',
des:'灰色穿插于黑白之间，代表着幽暗、典雅、寂寞与空灵。'
}, {
top:'resources/images/blue-top.jpg',
left:'resources/images/blue-left.jpg',
right:'resources/images/blue-right.jpg',
thumbnail:'resources/images/blue-thumbnail.jpg',
title:'宁静幽雅蓝',
des:'蓝是一种纯净的颜色，代表着宁静、理智、淡泊、广阔与忧郁。'
}];
//页面加载完毕，为skin list添加项
$(function(){
for(var i=0;i<skins.length;i++) {
$("#SkinList").append(
"<div class='media' onclick='skinToggle("+i+")'>" +
"<a href='#' class='pull-left'>" +
"<img src='" + skins[i].thumbnail + "' title='Toggle to change skin.'/>" +
"</a>" +
"<div class='media-body'>" +
"<h3 class='media-heading'>" + skins[i].title + "</h3>" +
"<p class='text-left'>" + skins[i].des + "</p>" +
"</div>" +
"</div>"+
"<hr/>"
);
}
//默认使用下标为0的皮肤
skinToggle(0);
});
//skin list 下拉框显示控制
var listShow=function(){
$("#SkinList").css("display","block");
};
var listHide=function(){
$("#SkinList").css("display","none");
};
//皮肤切换控制
var skinToggle=function(index){
var item=skins[index];
console.log(index);
$("#header").css("background","url("+item.top+")");
$("#header").css("background-size","cover");
$("#left-box").css("background","url("+item.left+")");
$("#left-box").css("background-size","cover");
$("#right-box").css("background","url("+item.right+")");
$("#right-box").css("background-size","contain");
};很简单的代码，然后来体验一下这酷炫的感觉
在线演示 （1月后 17-03-10 腾讯云服务器到期，不一定续）
本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。
相关文章
扫码关注云+社区
领取腾讯云代金券
我来说两句