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


Posted in Javascript onSeptember 17, 2016

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

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

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

点击图片如何实现背景图片能够进行切换呢,其实就只是涉及到一个样式的处理,即如何改变背景图片,以及背景图片的一个显示问题。那么问题来了,要如何获取当前点击或者选中的图片呢,可以通过获取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框架结合jQuery仿百度换肤功能实例解析

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

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

Javascript 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
javascript继承之为什么要继承
Nov 10 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
vue组件学习教程
Sep 09 Javascript
详解js的视频和音频采集
Aug 09 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 #Javascript
H5用户注册表单页 注册模态框!
Sep 17 #Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 #Javascript
JavaScript职责链模式概述
Sep 17 #Javascript
JavaScript类的写法
Sep 17 #Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 #Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 #Javascript
You might like
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
php和html的区别点详细总结
2019/09/24 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
python实现sublime3的less编译插件示例
2014/04/27 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
简单而又朴实的个人求职信分享
2013/12/12 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
安全施工标语
2014/06/07 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
人工作失职检讨书
2015/05/05 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
Oracle中update和select 关联操作
2022/01/18 Oracle