使用javascript為網(wǎng)頁增加夜間模式
更新時(shí)間：2014年01月26日 09:47:03 作者：
如何給Web頁面增加夜間模式功能? 其實(shí)所謂的夜間模式就是在頁面上增加一個(gè)透明的遮罩層，但是遮罩層會(huì)擋住頁面元素， 解決方法是 添加DIV，給DIV的outline屬性一個(gè)很大的outline-width值，用outline的邊框作為遮罩，這樣既能正常點(diǎn)擊頁面元素，又能達(dá)到夜間模式的效果
HTML+CSS:
復(fù)制代碼 代碼如下:
<div class="cover"></div>
復(fù)制代碼 代碼如下:
<style>
.cover{
position:fixed;
top: 0px;
left: 0px;
outline:5000px solid rgba(0, 0, 0, 0.3);
z-index: 99999;
}
</style>
接著用JavaScript寫個(gè)夜間模式plus:
復(fù)制代碼 代碼如下:
<script>
var brightness;
//顯示遮罩
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 + ')';
}
//事件監(jiān)聽
window.addEventListener('keydown', function(e) {
if (e.altKey && e.keyCode == 90) { //Alt+Z:打開夜間模式
cover(brightness = 0.3);
}
if (e.altKey && e.keyCode == 88) { //Alt+X:關(guān)閉
cover(brightness = 0);
}
if (e.altKey && e.keyCode == 38) { //Alt+↑:增加亮度
if (brightness - 0.05 > 0.05) cover(brightness -= 0.05);
}
if (e.altKey && e.keyCode == 40) { //Alt+↓:降低亮度
if (brightness + 0.05 < 0.95) cover(brightness += 0.05);
}
}, false);
</script>
還可以寫成GreaseMonkey腳本，作為瀏覽器擴(kuò)展給任意頁面增加夜間模式
您可能感興趣的文章:
- 通過Nodejs搭建網(wǎng)站簡(jiǎn)單實(shí)現(xiàn)注冊(cè)登錄流程
- 讓網(wǎng)站自動(dòng)生成章節(jié)目錄索引的多個(gè)js代碼
- 利用JS測(cè)試目標(biāo)網(wǎng)站的打開響應(yīng)速度
- android Jsoup獲取網(wǎng)站內(nèi)容 android獲取新聞標(biāo)題實(shí)例
- nodejs+express實(shí)現(xiàn)文件上傳下載管理網(wǎng)站
- AngularJS實(shí)現(xiàn)網(wǎng)站換膚實(shí)例
- 基于JavaScript或jQuery實(shí)現(xiàn)網(wǎng)站夜間/高亮模式
相關(guān)文章
這篇文章主要介紹了JavaScript中return用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了javascript中return語句的功能與使用技巧,需要的朋友可以參考下2016-11-11
Javascript 訪問樣式表實(shí)現(xiàn)代碼
Javascript訪問樣式表--又一篇好文章2009-08-08
微信小程序出現(xiàn)wx.getLocation再次授權(quán)問題的解決方法分析
這篇文章主要介紹了微信小程序出現(xiàn)wx.getLocation再次授權(quán)問題的解決方法,結(jié)合實(shí)例形式分析了解決wx.getLocation再次授權(quán)問題的相關(guān)操作步驟,需要的朋友可以參考下2019-01-01
以前發(fā)布的防止被iframe的代碼，容易在火狐瀏覽器下， 不斷的刷新頁面。所以從網(wǎng)站找到了這篇文章。2010-07-07
獲取鍵盤控制事件是實(shí)現(xiàn)交互性最有力的方法之一。2008-04-04
JavaScript實(shí)現(xiàn)審核流程狀態(tài)的動(dòng)態(tài)顯示進(jìn)度條
對(duì)于有很多流程的東西，我們希望能夠根據(jù)不同的階段，用流程條對(duì)應(yīng)地進(jìn)行顯示，非常直觀，給用戶帶來極好的用戶體驗(yàn)，下面小編給大家分享JavaScript實(shí)現(xiàn)審核流程狀態(tài)的動(dòng)態(tài)顯示進(jìn)度條功能，需要的的朋友參考下2017-03-03
js實(shí)現(xiàn)創(chuàng)建刪除html元素小結(jié)
本文給大家簡(jiǎn)單介紹了下使用javascript和jquery實(shí)現(xiàn)創(chuàng)建刪除html元素的方法，非常的實(shí)用，有需要的小伙伴可以參考下。2015-09-09
javascript中如何將字符串轉(zhuǎn)換成數(shù)字
這篇文章主要介紹了javascript中如何將字符串轉(zhuǎn)換成數(shù)字問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
JavaScript中正則表達(dá)式判斷匹配規(guī)則及常用方法
JS作為一門常用于web開發(fā)的語言，必然要具備正則這種強(qiáng)大的特性，本文將對(duì)JS中的正則用法及常用函數(shù)進(jìn)行一番總結(jié)2017-08-08
antd組件Upload實(shí)現(xiàn)自己上傳的實(shí)現(xiàn)示例
這篇文章主要介紹了antd組件Upload實(shí)現(xiàn)自己上傳的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12