网页背景切换的实现方法

Author: Satori Satori

Posted: 2017-10-06 16:53:10

Category: CSS HTML JavaScript 技术

Views: 595 Comments: 0

## 一、简介 在实现了网页键盘的处理后,下一步就是利用键盘快捷键实现一些功能了。如果还没有看过键盘快捷键的实现,请移步[这篇文章][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