一键换肤的简单实现
时间:2022-04-27
本文章向大家介绍一键换肤的简单实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
以前看到一键换肤的效果很炫酷,其实想一想,实现很简单,于是乎也写一个吧。
上代码:
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 腾讯云服务器到期,不一定续)
- [C#7] 1.Tuples(元组)
- 防止“rm-rf/”误删除的5种方法
- 基于DotNetOpenAuth实现OpenID 服务提供者
- .NET 和Java 对象 XML序列化 库WOX
- jquery mobile 移动web(6)
- IIS6 间歇性的发生500错误的解决方法
- 产品之上的世界观
- 使用Windows 7中的库
- WordPress 开发之让浏览器自动加载最新的CSS、JS文件(免刷新缓存)
- [C#6] 0-概览
- 移植Windows自宿主WCF服务到Linux/Mono2.8
- IISWeb应用防火墙WAF
- WordPress 开发之让浏览器自动加载最新的CSS、JS文件(免刷新缓存)
- 在Windows 7无法通过UNC路径连接到共享文件夹的解决方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法