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代码的实现一个图片向上滚动切换
Sep 02 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
Angular表单验证实例详解
Oct 20 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
JS变量及其作用域
Mar 29 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 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学习之字符串比较和查找
2011/04/17 PHP
PHP 万年历实现代码
2012/10/18 PHP
php生成excel列序号代码实例
2013/12/24 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
python求绝对值的三种方法小结
2019/12/04 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
幼儿园父亲节活动方案
2014/03/11 职场文书
绿色学校实施方案
2014/03/31 职场文书
收款委托书范本
2014/09/11 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
同学毕业留言寄语
2015/02/27 职场文书
新年晚会开场白
2015/05/29 职场文书
在职证明书模板
2015/06/15 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
创业计划书之电动车企业
2019/10/11 职场文书