以前看到一键换肤的效果很炫酷,其实想一想,实现很简单,于是乎也写一个吧。
上代码:
oneBtnChangeSkin.html ( 引入bootstrap.min.css 和 jquery.js )
one button to change skinoneBtnChangeSkin.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
$("#SkinList").append(
"
"+"
"
);
}
//默认使用下标为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 腾讯云服务器到期,不一定续)