Maicss
2022-01-01 05:28 deepin
前端不太行,写的有点烂,希望有时间的大佬可以来完善一下~
目前点完图片后会置顶,不清楚导致的原因😑
Reply Like 1 View the author
前端不太行,写的有点烂,希望有时间的大佬可以来完善一下~
目前点完图片后会置顶,不清楚导致的原因😑
稍微改了下,滚动还是没法搞定😂
// ==UserScript==
// @name 深度科技社区 图片查看器优化
// @namespace https://maicss.gitee.io
// @version 0.1
// @description 将深度社区帖子中查看图片的功能优化,让其具有放大缩小等功能。
// @author Maicss
// @match https://bbs.deepin.org*/post/*
// @icon https://bbs.deepin.org/favicon.ico
// @grant none
// ==/UserScript==
(function () {
'use strict';
var imgBox_style = document.createElement('style')
imgBox_style.innerHTML = ".imgBox {display:none!important;}"
document.getElementsByTagName("head")[0].appendChild(imgBox_style);
var viewer_style = document.createElement("link");
viewer_style.setAttribute('rel', 'stylesheet');
viewer_style.setAttribute('href', 'https://fengyuanchen.github.io/viewerjs/css/viewer.css');
document.getElementsByTagName("head")[0].appendChild(viewer_style);
var viewerjs = document.createElement("script");
viewerjs.setAttribute("src", "https://fengyuanchen.github.io/viewerjs/js/viewer.js");
document.getElementsByTagName("head")[0].appendChild(viewerjs);
const timer = () => {
setTimeout(function () {
if (!Viewer) {
timer()
return
}
console.log(111)
const imgs = document.getElementsByClassName('post_edit')[0].querySelectorAll('img')
for (const i of imgs) {
const viewer = new Viewer(i, {
focus: false,
inline: false,
navbar: false,
});
}
}, 500);
}
timer()
})();
给你加上点图片和部分字体的排版样式美化:
(function () {
'use strict';
var new_style = document.createElement('style')
new_style.innerHTML = `.imgBox {display:none!important;}
.content img:not(.emoji), .vditor-reset img:not(.emoji){display: block;
box-shadow: 0px 8px 16px 1px hsla(0, 0%, 0%, 0.3);
border-radius: 5px;
margin: 3rem auto;
max-width: 95% !important;
image-orientation: from-image;}
.content h1, .vditor-reset h1 {
text-align: center;
font-family: serif !important;
font-size: 2.5em !important;
font-weight: 900 !important;
margin-top: 1.5em !important;
}
.content code, .vditor-reset code {
font-family: "Courier", Monaco, Consolas,"Liberation Mono",Menlo,Courier,monospace,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol","Android Emoji","EmojiSymbols" !important;
}
`
document.getElementsByTagName("head")[0].appendChild(new_style);
var viewer_style = document.createElement("link");
viewer_style.setAttribute('rel', 'stylesheet');
viewer_style.setAttribute('href', 'https://cdn.jsdelivr.net/gh/fengyuanchen/viewerjs/dist/viewer.min.css');
document.getElementsByTagName("head")[0].appendChild(viewer_style);
var viewerjs = document.createElement("script");
viewerjs.setAttribute("src", "https://cdn.jsdelivr.net/gh/fengyuanchen/viewerjs/dist/viewer.min.js");
document.getElementsByTagName("head")[0].appendChild(viewerjs);
const timer = () => {
setTimeout(function () {
if (!Viewer) {
timer()
return
}
const imgs = document.getElementsByClassName('post_edit')[0].querySelectorAll('img')
for (const i of imgs) {
const viewer = new Viewer(i, {
focus: false,
inline: false,
navbar: false,
});
}
}, 500);
}
timer()
})();
稍微改了下,滚动还是没法搞定😂
// ==UserScript==
// @name 深度科技社区 图片查看器优化
// @namespace https://maicss.gitee.io
// @version 0.1
// @description 将深度社区帖子中查看图片的功能优化,让其具有放大缩小等功能。
// @author Maicss
// @match https://bbs.deepin.org*/post/*
// @icon https://bbs.deepin.org/favicon.ico
// @grant none
// ==/UserScript==
(function () {
'use strict';
var imgBox_style = document.createElement('style')
imgBox_style.innerHTML = ".imgBox {display:none!important;}"
document.getElementsByTagName("head")[0].appendChild(imgBox_style);
var viewer_style = document.createElement("link");
viewer_style.setAttribute('rel', 'stylesheet');
viewer_style.setAttribute('href', 'https://fengyuanchen.github.io/viewerjs/css/viewer.css');
document.getElementsByTagName("head")[0].appendChild(viewer_style);
var viewerjs = document.createElement("script");
viewerjs.setAttribute("src", "https://fengyuanchen.github.io/viewerjs/js/viewer.js");
document.getElementsByTagName("head")[0].appendChild(viewerjs);
const timer = () => {
setTimeout(function () {
if (!Viewer) {
timer()
return
}
console.log(111)
const imgs = document.getElementsByClassName('post_edit')[0].querySelectorAll('img')
for (const i of imgs) {
const viewer = new Viewer(i, {
focus: false,
inline: false,
navbar: false,
});
}
}, 500);
}
timer()
})();
这个感觉有时候会失灵啊,点击没反映,得刷新几次
这个感觉有时候会失灵啊,点击没反映,得刷新几次
应该是挂载dom慢了吧
Popular Events
More
论坛中查看图片的功能我想大家都懒得吐槽了,今天发现一个很好用的开源js图片查看器,于是利用油猴脚本将其迁移到本论坛中。
脚本代码:
使用方法
首先下载浏览器插件:https://www.tampermonkey.net/index.php
根据浏览器不同,自行安装。
然后点击该插件按钮,选择添加新脚本:
将脚本复制进去,按Ctrl+S保存即可。
后可以根据需求在右上角插件位置打开和关闭。
效果图
使用的开源图片查看器主页:
https://fengyuanchen.github.io/viewerjs/