标题: [精][网插]图片预览器
时间: 2022-06-22发布,2022-06-22修改
代替目前林子的新窗口查看图片,可以之间在当前页面进行图片预览。
支持图片旋转、放大缩小和反转等。
对于帖子或回复里有多图的,支持之间切换查看图片,方便查看多图的“技术帖”。
导入网页插件:viewer图片预览(当前用户:24,总安装次数:30)<link rel="stylesheet" href="https://hu60.cn/q.php/api.webplug-file.11051_public_viewer-css.css" />
<script src="https://hu60.cn/q.php/api.webplug-file.11051_public_viewer-js.js" defer></script>
<script src="https://hu60.cn/q.php/api.webplug-file.11051_public_viewer.js" defer></script>
『回复列表(20|显示机器人聊天)』
一些没有操作DOM的JS外链(页面功能增强的代码)可以加上defer
来避免减缓页面首次渲染速度,带有defer
的js会延迟到DOM解析完成之后,但是在DOMContentLoaded
事件触发之前执行,同时会严格按照书写顺序执行(不会破坏依赖关系)。
红米K30 Pro(变焦版)
@读书顶个鸟用,改成这样比较好,修复了无关图片(比如顶部Logo、网页插件添加的图片)触发预览的问题:
$(document).ready(function () {
document.querySelectorAll('.userimg, .userthumb').forEach(img => (img.onclick = function () {
// 链接中的图片不预览
if (0 !== $(this).parents('a').length) return;
let elem = $(this).parents('.user-content');
elem = elem.length > 0 ? elem[0] : this;
let viewer = new Viewer(elem, {
hidden: () => viewer.destroy(),
filter(image) {
return image.matches('.userimg, .userthumb');
}
});
viewer.show()
}));
});