引导框架结合jQuery仿百度换肤功能实例解析

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

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

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

div class=' container-fluid B- icons ' div class=' B- icons-item ' id=' B- box ' a href=' JavaScript :'宝箱/a/div class=' b-icons-item ' id=' b-change ' a href=' JavaScript :'换肤/a/div class=' B- icons-item ' id=' B- msg ' a href=' JavaScript :'消息/a/div/div class=' s-icons ' div class=' s-icons-bottom ' div class=' icon-items ' ul lia href=' JavaScript :'热门/a/Li lia href=' JavaScript :'游戏/a/Li lia href=' JavaScript :'卡通/a/Li lia href=' JavaScript :'明星/a/Li lia href=' JavaScript :'风景/a/Li lia href=' JavaScript :'简约/a/Li lia href=' JavaScript :'小清新/a/Li lia href=' JavaScript :'自定义/a/Li/ul/div class=' icon-up ' div I class=' glyphicon-glyphicon-arrow-up '/I a href=' JavaScript :'收起/a/div/div style=' clear : both '/div class=' icon-bottom ' ul Li class=' col-LG-1 col-LG-offset-1 dpic ' img src=' http : images/0。JPEG ' title='背景图/Li Li class=' col-LG-1 dpic ' img src=' http : images/1。JPEG ' title='背景图/Li Li class=' col-LG-1 dpic ' img src=' http : images/2。png ' title='背景图/Li Li class=' col-LG-1 dpic ' img src=' http : images/3。jpg ' title='背景图/Li Li class=' col-LG-1 dpic ' img src=' http : images/4。jpg ' title='背景图/Li Li class=' col-LG-1 dpic ' img src=' http : images/5。jpg ' title='背景图/Li Li class=' col-LG-1 dpic ' img src=' http : images/6。JPEG ' title='背景图/li /ul /div /div /div接下来是如何修饰外观，我比较喜欢简单的界面。

附上钢性铸铁代码：

* { margin :0 pxpadding :0 pxfont-family : '微软雅黑，Helvetica，无衬线，拉托；}.B-图标{背景色： # 569 CAA高度： 32px线高： 32px}.b图标乙.图标-项目{左侧浮动：}.B-图标#b-box{边距-左侧： 10%;}.b-图标# b-更改，b-图标# B- msg { margin-left :20 px；}.b图标#b框，b-图标# b-更改，b-图标# b-msg { text-decoration :下划线；}.b-图标# b-框a .b-图标# b-更改a .B-图标# B- msg a { font-size : 12px；color: # fff}。s图标{宽度： 100%；位置：固定；left: 0pxtop:0px背景-color : # fff；高度： 175像素；显示器：无；}.s图标s .图标-底部{宽度： 100%;高度： 35pxborder-底部： 1px实心# 808080;}.s图标。图标-项目{左边距-:15%;}.s图标图标-项目ul Li {高度： 30px线高： 30px向左浮动：列表样式：无；边距-左侧：10 px右边距：10 px}.s图标。图标-项目a { color: # 666}。s图标。图标-up {行高： 30px向右浮动：右边距：10%}。s图标。图标-厄普代夫a .s图标icon-updiv I { color : # 2544 ff；}.s图标。图标-底部{宽度： 100%;高度： 100像素；保证金-左侧： 15%;页边距-顶部：20 px}.s图标。图标-底部dpic { text-align : center列表样式：无；左边距left: 5px}。s图标。图标-底部dpic img {宽度： 120px高度：80 px}最后一部分是比较重要的，即如何撰写jquery代码实现图片的切换。

当你点击改变皮肤时，你会切换到一个界面，其中包含皮肤分类和折叠按钮。点击折叠时，界面会有折叠的效果。这个功能有三种实现方式，你可以自己选择一种：

1)向下滑动()和向上滑动()；

2)显示()和隐藏()；

3)fadeOut()和fadeIn()。

这里我更喜欢第二种方式，所以代码中使用了第二种方式。

如何通过点击图片来切换背景图片，其实只涉及到一个风格处理，即如何改变背景图片以及背景图片的一个显示问题。那么问题来了。如何获取当前点击或选中的图片？您可以通过在img中获取src属性来获取图片的路径，jquery可以通过使用attr()来获取它。那就是：

var src=$(this)。attr(' src ')；

这表示当前鼠标单击图片的对象。

为了在不改变背景图片的情况下刷新页面，我使用html5的localStorage进行存储。最常用的方法是getItem()和setItem():

var bgig=local storage . getitem(' bgig ')；

localStorage.setItem('bgig '，src)；

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

$(function(){ var bgig=local storage . 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-更改a ')。单击(function () { $(')。s形图标')。演出(500场)；});$('.图标-向上a’)。单击(function () { $(')。s形图标')。隐藏(500)；});$('.dpic img ')。单击(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实用教程