带自举框架的仿百度皮函数分析

皮肤功能的应用非常广泛，无论是搜索界面还是通用的管理界面等，都可以设计和应用皮肤功能，以更好的用户体验。

今天的假百度的皮肤功能，皮肤的基本功能的实现，接下来将介绍如何实现，界面的设计过程中，我使用了Bootstrap框架来更好的适应屏幕。（当然，是用这个框架比较熟悉的别忘了带上的CSS和JS封装的Bootstrap框架）。创建一个项目的时候，最好是单独的CSS，JS，与图像分别。

首先是布局的布局，我只是一个简单的界面皮肤，它是一些按钮和图片，为了实现简单，所以皮肤的背景图像都是直接选择的，使用UL标签布局，当然可以使用原来的div布局。



胸部
换肤
新闻





热
游戏
卡通
明星
景观
简单的
呼吸新鲜空气
习俗





停止


















下一步是如何修改外观，我更喜欢简单的界面。

附加到CSS代码：




* {
保证金：0px；
填料：0px；
字体微软雅黑
}
b-icons {。
背景颜色：# 569caa；
身高：32px；
行高：32px；
}
。b-icons。b-icons-item {
浮点数：左；
}
b-icons # B-box {。
左缘：10%；
}
。b-icons # b-change，b-icons # b-msg {。
左：20px保证金；
}
。b-icons # B-box，。b-icons # b-change，b-icons # b-msg {。
文字装饰：下划线；
}
。b-icons # B-box，。b-icons # b-change，b-icons # b-msg一{。
字体大小：12px；
颜色：# FFF；
}
s-icons {。
宽度：100%；
位置：固定；
左：0px；
上图：0px；
背景颜色：# FFF；
身高：175px；
显示：无；
}

。s-icons。s-icons-bottom {
宽度：100%；
身高：35px；
底部边框：1px solid # 808080；
}
。s-icons图标项{。
左缘：15%；
}
。s-icons。图标项> ul {
身高：30px；
行高：30px；
浮点数：左；
列表样式：无；
左：10px保证金；
右边距：10px；
}
s-icons.icon-items一{。
颜色：# 666；
}
。s-icons。图标上{
行高：30px；
浮子：右边；
保证金权利：10%
}
。s-icons。图标上> div，。s-icons。图标上> div我{
颜色：# 2544ff；
}
。s-icons。图标底部{
宽度：100%；
身高：100px；
左缘：15%；
边距：20px；
}
。s-icons DPIC {。图标的底部。
文本对齐：中心；
列表样式：无；
左：5px保证金；
}
s-icons.icon-bottom.dpic img {。
宽度：120px；
身高：80px；
}




最后一部分更重要的是，如何编写jQuery代码来实现图片的切换。

当点击皮肤时，会切换到一个界面，其中包含皮肤的分类和放置，当你点击按钮时，界面会被缩回，起作用，要实现这个功能，有三种方式，你可以选择一种方式：



1）slideDown（）和（）slideup；



2）显示（）和隐藏（）；



3）（）和（）渐显渐隐。



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

我们如何通过点击图片来改变背景图片实际上，它只涉及一种风格的处理，即如何改变背景图像和背景图像的显示问题，问题是如何获得当前的点击或选定的图片。我们可以通过在IMG获取src属性获得图片的路径，以及jQuery可以收购attr（）方法：

VaR src=美元（这）。Attr（src）；

这表示鼠标在图片上单击的对象。

为了刷新页面不改变背景图片，我使用了HTML5的本地存储的存储，这是最常见的用于（）和SetItem GetItem（）方法：

无功bgig = localstorage.getitem（bgig ）；

localstorage.setitem（bgig

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




$（函数（）{（））
无功bgig = localstorage.getitem（bgig ）；
如果（bgig = = null）{
$（）Css（背景图像）：URL（图像 1）
}
{其他
$（体）。Css（{背景图像：URL（+ bgig + ）、背景大小：盖}）；
}

$（# b-change ）。Click（function（）{）
$（。s-icons ）显示（500）；
}）；
$（图标a）。Click（函数（）{）
$（。s-icons ）藏（500）；
}）；

$（。DPIC IMG）。Click（function（）{）
VaR src=美元（这）。Attr（src）；
$（）Css。
localstorage.setitem（bgig
}）；

}）；




设计素描 uff1a



以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。

如果你想深入学习，你可以点击这里学习，并添加两个精彩的主题：自举教程