2015-08-09 18:23 LJY2345 评论关闭  90 
  评分 0 次,平均分 0.0

如何给Web、WordPress页面增加夜间模式功能? 最近给博客增加了这个功能,有人问我怎么做,现在就拿出了分享吧,
其实所谓的夜间模式就是在页面上增加一个透明的遮罩层,但是遮罩层会挡住页面元素, 解决方法是 添加DIV,给DIV的outline属性一个很大的outline-width值,用outline的边框作为遮罩,这样既能正常点击页面元素,又能达到夜间模式的效果。实际效果你可以在本站试试
本文需回复可见

HTML+div代码如下:

css代码如下:

接着用JavaScript写个夜间模式:

如果Alt键和系统发射冲突建议把altKey改成ctrlKey,意思是按Ctrl+。。。键控制啦
代码使用方法:

对于小白,这个是必须的,我建议把css代码放在wp主题的style.css文件里,如果你想让功能在全站实现;就把js和div放在底部,只是文章就加在文章页面,,,是不是有点废话了。

还可以写成GreaseMonkey脚本,作为浏览器扩展给任意页面增加夜间模式

历史上的今天:

 

除特别注明外,本站所有文章均为LJY IT BLOG原创,转载请注明出处来自https://www.ljy2345.com/1732.html

博 主作者: 关注:4    粉丝:0最后编辑于:2017年7月20日
LJY IT BLOG的站长。

扫一扫打赏

支付宝扫一扫打赏

微信扫一扫打赏

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

扫一扫二维码分享