成功给网站增加关注、粉丝功能;移植了Tint主题的新特征,折腾告一段落!
   2015-08-09 18:23 来源:LJY2345 |   5 条评论 |  隐藏边栏  64 
  评分 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

博 主关于作者:
LJY IT BLOG的站长。

扫一扫打赏

支付宝扫一扫打赏

微信扫一扫打赏

发表评论

表情 格式
图片

                      
  1. :?:

    //css代码框,有高亮效果
    new 评论达人 LV.1 3年前 (2016-04-03) [0] [0]
  2. 看下

    jiji 评论达人 LV.1 3年前 (2016-03-12) [0] [0]
  3. 这个确实挺人性化哟

    上谷歌 评论达人 LV.2 3年前 (2016-02-19) [0] [0]
  4. 测试七牛评论

    Gyue 博 主 4年前 (2015-08-12) [0] [0]
切换注册

登录

忘记密码 ?

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

切换登录

注册

扫一扫二维码分享