换肤功能的应用很广，不管是搜索界面还是普通的管理界面等等，都可以进行设计并且应用换肤功能，起到更好的用户体验。
今天仿造百度的换肤功能，实现了基本的换肤功能，接下来将会为大家介绍如何实现。在设计界面的过程当中，我采用了Bootstrap框架，以便更好的适应屏幕。（当然也是为了更好的熟悉使用这个框架，大家别忘了把Bootstrap框架的css和js包引进来哦）。在创建项目时最好可以分别将css、js、images分开。
首先是布局，我只是布局了一下换肤的简单界面，其中就是一些按钮和图片，为了简单实现，所以换肤的背景图片都是直接选定的，利用ul li标签直接布局，当然也可以用原始的div布局。
接下来是如何修饰外观，我比较喜欢简单的界面。
附上css代码：
最后一部分是比较重要的，即如何撰写jquery代码实现图片的切换。
在点击换肤的时候，会切换一个界面，里面含有皮肤的分类和收起按钮，当点击收起时，界面会有收起的效果，想要实现这个功能，有三种方式，可以自行选择一种方式：
1）slidedown()和slideup();
2）show()和hide();
3）fadeOut()和fadeIn().
点击图片如何实现背景图片能够进行切换呢，其实就只是涉及到一个样式的处理，即如何改变背景图片，以及背景图片的一个显示问题。那么问题来了，要如何获取当前点击或者选中的图片呢，可以通过获取img中的src属性，从而获得图片的路径，jquery可以用过attr()方法来进行获取。即：
var src = $(this).attr("src");
this表示的是当前鼠标点击图片的对象。
为了刷新页面不改变背景图片，我采用了html5的localStorage进行存储，这个方法最常用的是getItem()和setItem()方法：
整个功能的实现过程如下：
$("#b-change a").click(function () {
$(".s-icons").show(500);
});
$(".icon-up a").click(function () {
$(".s-icons").hide(500);
});
$(".dpic img").click(function () {
var src = $(this).attr("src");
$("body").css({ "background-image": "url(" + src + ")","background-repeat":"no-repeat","background-size":"100%" });
localStorage.setItem("bgig",src);
});
});
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
