附上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);
});

});

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题：

原文链接：https://www.f2er.com/jquery/45793.html