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 相关文章推荐
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
layui实现三级导航菜单
Jul 26 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP VS ASP
2006/10/09 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
python实现Adapter模式实例代码
2018/02/09 Python
Anaconda入门使用总结
2018/04/05 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
说明书怎么写
2014/05/06 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android