Bootstrap结合jQuery实现仿百度换肤功能详解

换肤功能概述

换肤功能在各类应用中十分常见，无论是搜索引擎界面还是后台管理系统，合理应用换肤功能都能显著提升用户体验。

项目结构与框架选择

本文旨在实现类似百度的换肤效果。在界面设计阶段，选用了Bootstrap框架以增强屏幕适应性，同时也借此机会深入熟悉该框架的使用。建议开发者在创建项目时，将CSS、JS和Images资源分别存放于不同目录，以保持项目结构清晰。

首先进行界面布局，主要包含按钮和图片元素。为简化实现过程，背景图片直接选用预设资源，通过ul和li标签完成布局，当然也可以使用原生div进行布局。

<div class="container-fluid b-icons">
 <div class="b-icons-item" id="b-box"><a href="javascript:;">宝箱</a></div>
 <div class="b-icons-item" id="b-change"><a href="javascript:;">换肤</a></div>
 <div class="b-icons-item" id="b-msg"><a href="javascript:;">消息</a></div>
 </div>
 <div class="s-icons">
 <div class="s-icons-bottom">
  <div class="icon-items">
  <ul>
   <li><a href="javascript:;">热门</a></li>
   <li><a href="javascript:;">游戏</a></li>
   <li><a href="javascript:;">卡通</a></li>
   <li><a href="javascript:;">明星</a></li>
   <li><a href="javascript:;">风景</a></li>
   <li><a href="javascript:;">简约</a></li>
   <li><a href="javascript:;">小清新</a></li>
   <li><a href="javascript:;">自定义</a></li>
  </ul>
  </div>
  <div class="icon-up">
  <div>
   <i class="glyphicon glyphicon-arrow-up"></i>
   <a href="javascript:;">收起</a>
  </div>
  </div>
  <div style="clear: both"></div>
  <div class="icon-bottom">
  <ul>
   <li class="col-lg-1 col-lg-offset-1 dpic"><img src="images/0.jpeg" title="背景图"></li>
   <li class="col-lg-1 dpic"><img src="images/1.jpeg" title="背景图"></li>
   <li class="col-lg-1 dpic"><img src="images/2.png" title="背景图"></li>
   <li class="col-lg-1 dpic"><img src="images/3.jpg" title="背景图"></li>
   <li class="col-lg-1 dpic"><img src="images/4.jpg" title="背景图"></li>
   <li class="col-lg-1 dpic"><img src="images/5.jpg" title="背景图"></li>
   <li class="col-lg-1 dpic"><img src="images/6.jpeg" title="背景图"></li>
  </ul>
  </div>
 </div>
 </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()方法。

本文示例中偏好第二种方式，因此代码采用show()和hide()实现收起效果。

关于点击图片切换背景的实现，核心在于样式处理，即如何更改背景图片及其显示方式。关键在于获取当前被点击的图片元素，可通过读取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实战教程。