无作为
不仅仅是一种态度!
当前位置: 无作为 » 技术教程 » wordpress技术经验 » 给网站添加夜间模式功能

给网站添加夜间模式功能

我想大家都喜欢在睡觉前来看看一些每天必逛的一些东西吧,比如什么QQ活着某些网页,这里分享一串代码教程,给网站添加夜间模式吧,然网页的可以自由调节暗度和亮度,这里也给出效果图:给网站添加夜间模式功能给网站添加夜间模式功能

一般的手机用户都可以开夜间模式的软件或者浏览器自带了夜间模式,不过电脑用户的话,开夜间模式就比较少了,特别是晚上光线比较暗的环境下,

这里就针对电脑用户而言,让我们来给自己网站添加个夜间模式来保护用户的眼睛吧,其实原理很简单,我们只需要给网站增加一个透明的遮罩层即可,不过加上了夜间模式效果有了,不过会挡住其他的页面按钮,

这里解决方法是 添加DIV,给DIV的outline属性一个很大的outline-width值,用outline的边框作为遮罩,这样既能正常点击页面元素,又能达到夜间模式的效果。

网站添加夜间模式功能

HTML+div代码如下:中间的内容这里就不多说了,罩住body里面的元素吧。

<div class="cover"></div>

css代码如下:添加在本站的style.CSS样式即可,

/* 夜间模式 */
.cover{
 position:fixed;
 top: 0px;
 left: 0px;
 outline:5000px solid rgba(0, 0, 0, 0.0);
 z-index: 99999;
}

接下来是JS代码:

//显示遮罩
function cover(brightness) {
 if (typeof(div) == 'undefined') {
 div = document.createElement('div');
 div.setAttribute('style', 'position:fixed;top:0;left:0;outline:5000px
 solid;z-index:99999;');
 document.body.appendChild(div);
 } else {
 div.style.display = '';
 }
 div.style.outlineColor = 'rgba(0,0,0,' + brightness + ')';
}
//事件监听
window.addEventListener('keydown', function(e) {
 if (e.ctrlKey && e.keyCode == 90) { //Alt+Z:打开夜间模式
 cover(brightness = 0.3);
 }
 if (e.ctrlKey && e.keyCode == 88) { //ctrl+X:关闭
 cover(brightness = 0);
 }
 if (e.ctrlKey && e.keyCode == 39) { //Alt+→:增加亮度
 if (brightness - 0.05 > 0.05) cover(brightness -= 0.05);
 }
 if (e.ctrlKey && e.keyCode == 37) { //Alt+←:降低亮度
 if (brightness + 0.05 < 0.95) cover(brightness += 0.05);
 }
}, false);

如果Alt键和系统发射冲突建议把altKey改成ctrlKey,意思是按Ctrl+*键控制。

代码使用方法:

无作为建议把css代码放在wp主题的style.css文件里,如果你想让功能在全站实现;就把js和div放在底部,只是文章就加在文章页面,

当然,还可以写成GreaseMonkey脚本,作为浏览器扩展给任意页面增加夜间模式,或者写成一个按钮,点击即可打开夜间模式,用A标签即可实现。

历史上的今天:

所有免费资源、福利、电影、破解软件未经允许不得转载:www.wuzuowei.net无作为 » 给网站添加夜间模式功能
分享到: 更多 (0)

来句评论吧! 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无作为-不仅仅是一种态度

登录/注册文章归档