CSDN博客文章阅读模式插件(附源码)

插件地址:https://greasyfork.org/zh-CN/scripts/380667-csdn%E5%8D%9A%E5%AE%A2%E9%98%85%E8%AF%BB%E6%A8%A1%E5%BC%8F%E5%88%87%E6%8D%A2%E6%8F%92%E4%BB%B6

插件安装使用说明请参阅:https://greasyfork.org/zh-CN

 

浏览器(正常)模式效果:

 

阅读模式效果:

 

提供下源代码,有兴趣可以互相学习:

// ==UserScript==
// @name         CSDN博客阅读模式切换插件 
// @version      1.4
// @description  CSDN 阅读模式和浏览模式切换,完美支持傲游、360、Chrome等浏览器
// @author       By Jackie http://csdn.admans.cn/
// @match        *://blog.csdn.net/*/article/details/*
// @grant    GM_addStyle
// @namespace https://greasyfork.org/users/164689
// ==/UserScript==GM_addStyle("#ReadBtn{position: relative;float: right;width: auto;background: #0f962191;z-index: 99;color: white;text-align: center;margin: 5px;padding: 5px;border-radius: 5px;cursor: pointer;}");
GM_addStyle(".html_body_readmodel{overflow: hidden;}");
GM_addStyle(".article_content_readmodel{position: fixed !important;top: 0px;left: 0px;width: 100%;z-index: 999;overflow: auto;height: 100%;background: white;padding: 20px;border:10px solid #bce4cba8;}");
GM_addStyle(".readBtn_float{position: fixed !important;right: 40px;}");
(function(){'use strict';var divView = document.createElement("div");divView.setAttribute("id", "ReadBtn");divView.innerHTML ='阅读模式';          var article=document.getElementsByClassName('article_content')[0];article.insertBefore(divView,article.childNodes[0]); //自动展开文章内容var readMoreBtn=document.getElementById('btn-readmore')if(readMoreBtn){readMoreBtn.click(); }divView.onclick=function(){if(divView.innerHTML=='阅读模式'){divView.innerHTML ='浏览模式';addClass(article,"article_content_readmodel");addClass(document.body,"html_body_readmodel");addClass(divView,"readBtn_float");                }else{             divView.innerHTML ='阅读模式';              removeClass(article,"article_content_readmodel");removeClass(document.body,"html_body_readmodel");removeClass(divView,"readBtn_float"); }}//检测样式function hasClass(ele, cls) {return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));}//添加样式function addClass(ele, cls) {if (!hasClass(ele, cls)) ele.className += " " + cls;}//删除样式function removeClass(ele, cls) {if (hasClass(ele, cls)) {var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");ele.className = ele.className.replace(reg, " ");}}  })();

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/285961.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【ArcGIS风暴】ArcGIS tif转jpg:JPEG压缩仅支持8位或16位无符号数据(具有一个或三个波段,且没有色彩映射表)解决方案!

扩展阅读:【ArcGIS风暴】ArcGIS支持的栅格数据格式大全及格式转换案例精解 文章目录 问题描述tif格式和JPEG格式详解ArcGIS软件tif转jpg方法总结问题描述 如下图所示,在ArcGIS中将tif格式的无人机影像数据导出为Jpg格式时,提示:JPEG压缩仅支持8位或16位无符号数据(具有一…

Blazor University (29)表单 —— 编辑表单数据

原文链接&#xff1a;https://blazor-university.com/forms/editing-form-data/编辑表单数据源代码[1]因为 EditForm 组件呈现标准的 <form> HTML 元素&#xff0c;实际上可以在我们的标记中使用标准的 HTML 表单元素&#xff0c;例如 <input> 和 <select>&a…

广州Uber优步司机奖励政策(1月4日~1月10日)

滴快车单单2.5倍&#xff0c;注册地址&#xff1a;http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单&#xff1a;http://www.cnblogs.com/mfryf/p/4612609.html 优步奖励低/不挣钱/怎么办?看这里&#xff1a;http://www.cnblogs.com/mfry…

10 关联模型《ThinkPHP6 入门到电商实战》

一、什么是关联模型 关联模型指在 tp 中使用模型对多个数据表进行关联。例如一个主账户表与一个账户信息表进行关联&#xff0c;此时两者关联后可以更加简便的进行操作&#xff0c;使代码更加清晰&#xff0c;操作更加简便。 二、 正向一对一关联 一对一关联指的是数据只有一…

Android 整体设计及背后意义

目录 1. Android设计的现实意义 1.1 发展的前提&#xff1a;硬件抽象 1.2 能力的枢纽&#xff1a;组件化 1.3 应用的基础-接口层 2. 对于我们的象征意义和实践 3. 小结 阿里妹导读&#xff1a;现实工作中经常可以听到这样的说法&#xff1a;框架的升级带来协议性能的提升…

85、交换机安全MAC层***配置实验之Port-Security

1、Port Security解析触发Port Security的条件&#xff1a;未授权的MAC地址端口MAC地址数量超过了限制触发Port Security后的动作&#xff1a;protect Security violation protect mode 丢弃数据&#xff0c;不发送SNMP Trap消息 restrict Security violation restr…

11 验证器《ThinkPHP6 入门到电商实战》

注&#xff1a;示例来源于官方手册 一、验证器定义 验证器用于对数据进行验证&#xff0c;你可以理解为一个“层”&#xff0c;在传入数据时可以使用这个层对数据进行验证&#xff0c;这样就可以不用频繁的在方法中编写代码去验证&#xff0c;只需要编写一个验证层即可&#…

nginx+php

nginxphp基础架构 生产实践 nginx配置文件: 主配置文件 123456789101112131415161718192021222324252627282930313233[rootlinux-node1 conf.d]# cat /etc/nginx/nginx.conf user nginx;worker_processes auto;error_log /var/log/nginx/error.log; pid /run/nginx.pid; # Load…

【ArcGIS风暴】ArcGIS10.8中栅格数据金字塔的来龙去脉,你知道吗?

如下图所示,通常情况下,当将没有金字塔的栅格数据集添加至 ArcGIS时,系统将提示您构建金字塔。金字塔指不同比例下分辨率降低的数据概视图。金字塔十分有用,因为金字塔提升了分辨率低于其全分辨率的栅格数据集的绘制速度。建议构建用于大型栅格数据集的金字塔。 点击【是】…

斯坦福大学Andrew Ng - 机器学习笔记(8) -- 推荐系统 大规模机器学习 图片文字识别...

大概用了一个月&#xff0c;Andrew Ng老师的机器学习视频断断续续看完了&#xff0c;以下是个人学习笔记&#xff0c;入门级别&#xff0c;权当总结。笔记难免有遗漏和误解&#xff0c;欢迎讨论。 鸣谢&#xff1a;中国海洋大学黄海广博士提供课程视频和个人笔记&#xff0c;在…

【CSS动效实战(纯CSS与JS动效)】02 flex 布局实战(仿 JD 及 gitCode 布局)及 media 自适应初探 下

二、flex 仿 gitCode 布局 及 自适应 首先查看我们的页面&#xff1a; 这个时候直接顶部一个块&#xff0c;下面分为左中右三个块&#xff0c;然后就解决了&#xff0c;是不是很简单&#xff1f;相比刚刚那么这个简单多了。那就来做吧。 2.1 基本布局 首先给一个 style 价格…

C语言按行和列求平均成绩代码(指针,二维数组)

如下所示成绩表,如何按行(每个人)或按列(每门课)的平均成绩? 结果: 文章目录 1. 自定义行平均函数2. 自定义列平均函数3. main()函数调用平均函数1. 自定义行平均函数 float save(float **PA,int M,int

架构师必须知道的架构设计原则

目录 一、前言 二、软件设计原则 GRASP通用职责分配软件模式 1. 信息专家(Information Expert) 2. 创建者(Creator) 3. 低耦合(Low Coupling) 4. 高内聚(High Cohesion) 5.控制器(Controller) 6. 多态(Polymorphism) 7. 纯虚构(Pure Fabrication) 8. 间接(Indirectio…

百度:病种类贴吧全面停止商业合作

新浪科技讯 1月12日上午消息&#xff0c; 百度今日就热门疾病被出卖一事向新浪科技发布对外公告&#xff1a;病种类贴吧全面停止商业合作 只对权威公益组织开放。百度方面在公告中表示&#xff0c;为了规范具有明显商业属性贴吧的运营管理&#xff0c;并提升贴吧的内容质量和用…

【CSS动效实战(纯CSS与JS动效)】02 flex 布局实战(仿 JD 及 gitCode 布局)及 media 自适应初探

一、flex 仿 JD 布局 首先&#xff0c;我们在编辑器中&#xff0c;写上基础代码&#xff0c;当然要在 style 中加上一个 flex 类&#xff0c;用于 flex 布局的定义&#xff0c;这个是必然需要的&#xff0c;在此一定得加上。 <!DOCTYPE html> <html lang"en&qu…

C语言sin()函数绘制正弦曲线代码(0-2π)

本文实现y=sin(x)正弦曲线在0-2π范围内的曲线图形,如下图所示: 完整C语言代码: #include<stdio.h> #include<math.h> main() {double y; int x,m,i; printf

MAUI模板项目闪退问题

MAUI模板项目闪退问题在MAUI最初发布的时候就曾创建过几个模板项目进行体验过&#xff0c;没遇到什么坑。由于最近需要开发针对餐饮行业的收银机&#xff08;安卓系统&#xff09;开发一款应用&#xff0c;这种收银机一般配置不咋滴&#xff0c;系统版本和性能也肯定比不上我们…

真正CSDN博客文章一键转载插件(含源码)

插件地址&#xff1a;https://greasyfork.org/zh-CN/scripts/381053-csdn%E5%8D%9A%E5%AE%A2%E6%96%87%E7%AB%A0%E8%BD%AC%E8%BD%BD%E6%8F%92%E4%BB%B6 插件安装使用说明请参阅&#xff1a;https://greasyfork.org/zh-CN 文章阅读界面 文章发布页面 源代码 // UserScript //…

微软欲闭源VS Code的C#扩展惹众怒

VS Code 是一个非常棒的代码编辑器&#xff0c;轻量&#xff0c;免费&#xff0c;跨平台。并且凭其丰富且强大的扩展功能受到众多开发者的青睐&#xff0c;你可以在上面愉快的进行各种语言的开发工作。就在前两天&#xff0c;微软的 .NET 和 Visual Studio 的项目经理 Tim Heue…

Python3.6学习笔记(三)

面向对象编程 面向对象编程 Object Oriented Programming 简称 OOP&#xff0c;是一种程序设计思想。OOP把对象作为程序的基本单元&#xff0c;一个对象包含了数据和操作数据的函数。 面向过程的程序设计把计算机程序视为一系列的命令集合&#xff0c;即一组函数的顺序执行。为…