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, " ");}}  })();

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

真正CSDN博客文章一键转载插件（含源码）
插件地址:https://greasyfork.org/zh-CN/scripts/381053-csdn%E5%8D%9A%E5%AE%A2%E6%96%87%E7%AB%A0%E8%BD%AC%E ...
前端小白也能快速学会的博客园博客美化全攻略[附源码]
前端小白也能快速学会的博客园博客美化全攻略[附源码] 文章目录前端小白也能快速学会的博客园博客美化全攻略[附源码] 美化方法论简介准备工作 js权限申请如何模仿一个博客园的自定义风格(样式css ...
Python 爬虫自动访问点击刷CSDN博客文章阅读量
一段小代码,可以帮助自动刷CSDN阅读量,感兴趣的朋友可以复制代码,然后把自己博客文章的URL修改一下就可以了,两个都修改之后可以使用了,帮助那些有需要的人 # 导入需要用到的库 import req ...
微信小程序版博客——开发汇总总结（附源码）
花了点时间陆陆续续,拼拼凑凑将我的小程序版博客搭建完了,这里做个简单的分享和总结. 整体效果对于博客来说功能页面不是很多,且有些限制于后端服务(基于ghost博客提供的服务),相关样式可以参考截图或 ...
一款超级简洁的个人博客系统搭建教程（附源码）
开发环境 IDEA.jdk1.8.mysql8.33 开发框架 springboot 1.首先,确保已安装 Git 和 IntelliJ IDEA.如果你还没有安装 Git,请前往官网下载并安装 Gi ...
CSDN博客文章一键转载插件
插件地址:https://greasyfork.org/zh-CN/scripts/381053-csdn%E5%8D%9A%E5%AE%A2%E6%96%87%E7%AB%A0%E8%BD%AC%E ...
C/C++ | Qt 实现爬虫功能，爬取CSDN博客文章
话不多说,先看程序运行截图: 注意: 本人没有看过爬虫相关的书籍,第一次写这种程序,这个程序是半屌子的,原理很简单,没有学习过爬虫的朋友,也可以写. 程序思路如下: 1.下载要爬网站的页面. 2.用正 ...
解决CSDN博客文章保存网页到本地后，页面显示不全的问题
更新:2018.3.29 问题 CSDN博客文章设置为新版皮肤("大白"),保存网页到本地后.打开离线保存的网页,会出现页面显示不全的问题.(或者,点击"展开阅读全文&q ...
CSDN博客文章写作技巧
CSDN博客文章写作技巧 1. CSDN博客文章段落缩进问题的解决办法 1.1 解决办法由于在写文档的时候,段落首习惯了缩进两个字符,发现使用 Tab 键无法解决这个问题,同时使用多个空格代替的 ...

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

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

最新文章

热门文章