百度换肤怎么实现的html,Bootstrap框架结合jQuery仿百度换肤功能实例解析

换肤功能的应用很广，不管是搜索界面还是普通的管理界面等等，都可以进行设计并且应用换肤功能，起到更好的用户体验。

今天仿造百度的换肤功能，实现了基本的换肤功能，接下来将会为大家介绍如何实现。在设计界面的过程当中，我采用了Bootstrap框架，以便更好的适应屏幕。(当然也是为了更好的熟悉使用这个框架，大家别忘了把Bootstrap框架的css和js包引进来哦)。在创建项目时最好可以分别将css、js、images分开。

首先是布局，我只是布局了一下换肤的简单界面，其中就是一些按钮和图片，为了简单实现，所以换肤的背景图片都是直接选定的，利用ul li标签直接布局，当然也可以用原始的div布局。

宝箱

换肤

消息

• 热门
• 游戏
• 卡通
• 明星
• 风景
• 简约
• 小清新
• 自定义

收起

• 
• 
• 
• 
• 
• 
• 

接下来是如何修饰外观，我比较喜欢简单的界面。

附上css代码：

*{

margin:0px;

padding:0px;

font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;

}

.b-icons{

background-color: #569caa;

height: 32px;

line-height: 32px;

}

.b-icons .b-icons-item{

float: left;

}

.b-icons #b-box{

margin-left: 10%;

}

.b-icons #b-change,.b-icons #b-msg{

margin-left:20px;

}

.b-icons #b-box,.b-icons #b-change,.b-icons #b-msg{

text-decoration:underline;

}

.b-icons #b-box a,.b-icons #b-change a,.b-icons #b-msg a{

font-size: 12px;

color:#fff;

}

.s-icons{

width: 100%;

position: fixed;

left: 0px;

top:0px;

background-color: #fff;

height: 175px;

display: none;

}

.s-icons .s-icons-bottom{

width: 100%;

height: 35px;

border-bottom: 1px solid #808080;

}

.s-icons .icon-items{

margin-left:15%;

}

.s-icons .icon-items>ul li{

height: 30px;

line-height: 30px;

float: left;

list-style: none;

margin-left:10px;

margin-right:10px;

}

.s-icons .icon-items a{

color:#666;

}

.s-icons .icon-up{

line-height: 30px;

float: right;

margin-right:10%

}

.s-icons .icon-up>div a,.s-icons .icon-up>div i{

color: #2544ff;

}

.s-icons .icon-bottom{

width: 100%;

height: 100px;

margin-left: 15%;

margin-top:20px;

}

.s-icons .icon-bottom .dpic{

text-align: center;

list-style: none;

margin-left: 5px;

}

.s-icons .icon-bottom .dpic img{

width: 120px;

height:80px;

}

最后一部分是比较重要的，即如何撰写jquery代码实现图片的切换。

在点击换肤的时候，会切换一个界面，里面含有皮肤的分类和收起按钮，当点击收起时，界面会有收起的效果，想要实现这个功能，有三种方式，可以自行选择一种方式：

1)slidedown()和slideup();

2)show()和hide();

3)fadeOut()和fadeIn().

在这里我比较喜欢第二种方式，所以代码中用的是第二种方式。

点击图片如何实现背景图片能够进行切换呢，其实就只是涉及到一个样式的处理，即如何改变背景图片，以及背景图片的一个显示问题。那么问题来了，要如何获取当前点击或者选中的图片呢，可以通过获取img中的src属性，从而获得图片的路径，jquery可以用过attr()方法来进行获取。即：

var src = $(this).attr("src");

this表示的是当前鼠标点击图片的对象。

为了刷新页面不改变背景图片，我采用了html5的localStorage进行存储，这个方法最常用的是getItem()和setItem()方法：

var bgig = localStorage.getItem("bgig");

localStorage.setItem("bgig", src);

整个功能的实现过程如下：

$(function () {

var bgig = localStorage.getItem("bgig");

if (bgig == null) {

$("body").css({ "background-image": "url(images/1.jpeg)", "background-size": "cover" });

}

else {

$("body").css({ "background-image": "url(" + bgig + ")", "background-size": "cover" });

}

$("#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);

});

});

效果图：

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

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