网页背景切换的实现方法
Author:
Satori
Posted: 2017-10-06 16:53:10
Category: CSS HTML JavaScript 技术
Views: 1067 Comments: 0
×
Name: Satori
Gender: male
Birthday: Feb. 2, 1995
Mobile:
Residence: Beijing
Website: https://chongliu.me
Microblog:
QQ:
Wechat:
Introduction: 我有知识我自豪！ 快乐咸鱼每一天~
## 一、简介
在实现了网页键盘的处理后，下一步就是利用键盘快捷键实现一些功能了。如果还没有看过键盘快捷键的实现，请移步[这篇文章][1]。
这篇主要讲键盘快捷键实现网页背景切换的实现方法，最后顺便题一下只显示背景的方法。
## 二、背景切换的实现方法
因为背景切换实现非常简单，因此放到第一个讲。所谓的背景切换就是指在静态背景（健全壁纸）和动态背景（可能不是很健全的壁纸）的切换。如果对动态壁纸实现方式感兴趣，请移步[这篇文章][2]。
实现的关键在于key的回调函数实现。这个函数要做的事情是判断现在是什么背景，然后接不接受这次切换请求。因为在小屏幕的时候是不显示动态背景的。具体的细节就是使用window的`max-width`属性来判断是否是小屏幕，然后用hidden-xs是否可见来判断是否是动态背景。因此很容易写出以下逻辑。
```
function toggle_background() {
if (!window.matchMedia('(max-width: 768px)').matches)
{
if ($(".hidden-xs").is(":visible"))
{
hide_background();
Cookies.set("animated_background", false, { expired: 14 });
}
else
{
show_background();
Cookies.set("animated_background", true, { expired: 14 });
}
}
}
```
值得注意的是切换背景的时候设置一个Cookie，来记录用户偏爱的背景模式，不用每次来都切换背景。每次加载页面的时候先读取这个cookie，代码如下。
```
var is_animated_background = Cookies.get("animated_background");
if (is_animated_background === "true")
{
show_background();
}
else
{
hide_background();
}
```
使用`hide_background`来隐藏动态背景，使用`show_background`来显示动态背景。于是下面给出这两个函数的实现。
```
function hide_background() {
$(".hidden-xs").hide();
$(".simple-image-div").css('display', '');
}
function show_background() {
$(".hidden-xs").show();
$(".simple-image-div").css('display', 'none');
}
```
其中静态壁纸装到`simple-image-div`当中，动态壁纸装到`hidden-xs`中。静态壁纸的构造和动态壁纸一样，也是采用100%高度和100%宽度覆盖屏幕的方式。但是有一个问题，就是静态背景在刷新的时候会闪一下，非常瞎眼。
瞎眼的原理这里稍微多说一下。在刷新的时候，这时你的屏幕是背景图片。刷新是需要过程的，可能是0.5秒的时间，这段时间，最先加载的是背景的颜色，也就是`background-color`，然后再是图片。因此整个过程你看到的是背景图片，纯色快，背景图片。如果你的背景图片是暗色的，背景颜色设置的是浅色，就会出现深色-浅色-深色的转换，而且中间过程很短，所以才会感觉眼睛被晃了一下。
解决这个问题我的确花了不少时间。最后比较好的解决方法是先将背景设置为黑色，然后给静态图片设置从黑到背景图片的过渡，这样就不会瞎眼了。整个过程采用css解决。
```
@keyframes simpleImage {
0% {
opacity: 0;
}
8% {
opacity: 0;
}
17% {
opacity: 1;
}
25% {
opacity: 1;
}
100% {
opacity: 1
}
}
.simple-image-div {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
color: transparent;
background-image: url('/static/mysite/images/background-lg.png');
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: -2;
animation: simpleImage 6s linear 0s;
animation-fill-mode: forwards;
}
```
以上代码看不懂可以先看[动态背景实现方法][2]，里面有讲`keyframe`之类的知识。
最后绑定一个按键listener即可，代码如下。
```
var key_listener = new window.keypress.Listener;
key_listener.sequence_combo("left up right down", toggle_background, true);
```
## 三、只显示背景的实现方法
讲完背景的切换还是顺便讲一下只显示背景的方法。这个也就很简单了，将主页面的div隐藏，再隐藏标题栏就好了，随后将这个函数跟按键listener绑定即可实现。代码如下。
```
function toggle_content() {
$("#main-content").toggle();
$("#navigation-bar").toggle();
}
key_listener.sequence_combo("up up down down left right left right b a", toggle_content, true);
```
[1]: https://chongliu.me/blogs/archive/136/
[2]: https://chongliu.me/blogs/archive/135/
LOGIN TO LEAVE A COMMENT