仿造百度换肤功能的实现

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

今天仿造百度的换肤功能，实现了基本的换肤功能，接下来将会为大家介绍如何实现。在设计界面的过程当中，我采用了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="data:images/0.jpeg" title="背景图"></li><li class="col-lg-1 dpic"><img src="data:images/1.jpeg" title="背景图"></li><li class="col-lg-1 dpic"><img src="data:images/2.png" title="背景图"></li><li class="col-lg-1 dpic"><img src="data:images/3.jpg" title="背景图"></li><li class="col-lg-1 dpic"><img src="data:images/4.jpg" title="背景图"></li><li class="col-lg-1 dpic"><img src="data:images/5.jpg" title="背景图"></li><li class="col-lg-1 dpic"><img src="data: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);});});

仿造百度换肤功能的实现相关推荐

百度换肤JavaScript功能
百度换肤JavaScript功能 CSS-code: <style type="text/css">*{margin: 0;padding: 0;list-style: ...
浏览器换肤功能项目案例百度换肤
大家好我是攻城狮JiRo, 今天给大家分享一下浏览器换肤的功能需求:爱美之心,人皆有之,随着人们物质生活的提高,需求也不断提高,同样,作为开发者,我们当然要心系客户,那么今天的案例就是实现换肤功能 ...
前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
百度换肤 querySelector方法抖音播放
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
为微信小程序增加换肤功能
起源之前,我做了一个展示类的微信小程序,本来都快要完结的了,可是突然,我才听说还要给小程序增加一个换肤功能,这个换肤功能可不是简单的写两套不同的样式表就行了,因为他要可以在后台动态替换背景,底图,文 ...
使用 css/less 动态更换主题色（换肤功能）
前言说起换肤功能,前端应该是非常熟悉了? 一般来说换肤的需求分为几种: 1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器 2. 在后台配置好色值,传到前 ...
在Ajax程序中实现无刷新换肤功能(asp.net2.0)
写了一年多的WEB程序,觉得程序中换肤的功能是非常吸引人眼球的技术.特别是在子父级的WEB平台与论坛上应用广泛,可以突出不同人的风格与个性. 从文章的标题上看是Ajax的无刷新换肤,只是本 ...
[css] 如何实现换肤功能？
[css] 如何实现换肤功能? css 换肤常见方案是通过 less/sass/postcss 等css 预处理器,通过它们自身的变量用法,设置不同变量,生成不同的主题样式,但是这些样式都是会被打包 ...

仿造百度换肤功能的实现

仿造百度换肤功能的实现相关推荐

最新文章

热门文章