Sleazy Fork is available in English.
最好用的98堂(原色花堂)脚本 高级搜索 自动签到 快速复制 快速评分 划词搜索 图片预览 快速收藏
< Rückmeldungen auf 保国逛色花
能否添加功能,就是图贴》》》》一行显示多张图。。。这样方便预览。我的代码并不完全成功。抛砖引玉// ==UserScript==// @name 222// @namespace http://tampermonkey.net/// @version 0.1// @description 在论坛帖子中一行显示多张图片。// @author Your name// @match https://rgkm7.cs33u.com/forum.php*// @grant GM_setValue// @grant GM_getValue// ==/UserScript==(function() { 'use strict'; // 函数:在一行中显示图片 function displayImagesInRow(rowCount, postContent) { // 选择帖子内容中的所有图片 let images = postContent.querySelectorAll('img'); // 计算每行要显示的图片数量 let imagesPerRow = Math.min(images.length, rowCount); // 设置每个图片的宽度 let imageWidth = `${100 / imagesPerRow}%`; // 设置父容器的样式以允许图片在一行中显示 postContent.style.display = 'flex'; postContent.style.flexWrap = 'wrap'; // 清除帖子内容的子元素,以重新排列图片 postContent.innerHTML = ''; images.forEach(image => { // 创建一个新的div元素,用于包装每个图片 let div = document.createElement('div'); div.style.width = imageWidth; div.style.marginRight = '10px'; // 图片之间添加一些间距 // 创建一个新的img元素,并设置其样式 let newImage = new Image(); newImage.src = image.src; newImage.style.maxWidth = '100%'; // 图片不超出容器宽度 newImage.style.height = 'auto'; // 保持图片原始高度 // 将新的img添加到新的div中 div.appendChild(newImage); // 将新的div添加到帖子内容中 postContent.appendChild(div); }); } // 函数:添加下拉框以选择每行图片的数量 function addDropdown() { let dropdownHTML = `
`; document.body.insertAdjacentHTML('beforeend', dropdownHTML); // 获取上次选择的图片数量 let lastSelected = GM_getValue('lastSelected', 4); document.getElementById('tutu-select').value = lastSelected; // 添加下拉框变化的事件监听器 document.getElementById('tutu-select').addEventListener('change', function() { let rowCount = parseInt(this.value); // 查找当前帖子的内容元素并应用样式 let postContent = document.querySelector('.t_fsz'); // 修改选择器以匹配帖子内容元素 displayImagesInRow(rowCount, postContent); // 保存选择的图片数量 GM_setValue('lastSelected', rowCount); }); } // 初始化脚本 function init() { // 默认显示4张图片每行 // 查找当前帖子的内容元素并应用样式 let postContent = document.querySelector('.t_fsz'); // 修改选择器以匹配帖子内容元素 let lastSelected = GM_getValue('lastSelected', 4); displayImagesInRow(lastSelected, postContent); // 添加下拉框以选择每行图片的数量 addDropdown(); // 设置帖子内容
Anmelden um eine Antwort zu senden.
能否添加功能,就是图贴》》》》一行显示多张图。。。这样方便预览。
我的代码并不完全成功。抛砖引玉
// ==UserScript==
// @name 222
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 在论坛帖子中一行显示多张图片。
// @author Your name
// @match https://rgkm7.cs33u.com/forum.php*
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
(function() {
'use strict';
// 函数:在一行中显示图片
function displayImagesInRow(rowCount, postContent) {
// 选择帖子内容中的所有图片
let images = postContent.querySelectorAll('img');
// 计算每行要显示的图片数量
let imagesPerRow = Math.min(images.length, rowCount);
// 设置每个图片的宽度
let imageWidth = `${100 / imagesPerRow}%`;
// 设置父容器的样式以允许图片在一行中显示
postContent.style.display = 'flex';
postContent.style.flexWrap = 'wrap';
// 清除帖子内容的子元素,以重新排列图片
postContent.innerHTML = '';
images.forEach(image => {
// 创建一个新的div元素,用于包装每个图片
let div = document.createElement('div');
div.style.width = imageWidth;
div.style.marginRight = '10px'; // 图片之间添加一些间距
// 创建一个新的img元素,并设置其样式
let newImage = new Image();
newImage.src = image.src;
newImage.style.maxWidth = '100%'; // 图片不超出容器宽度
newImage.style.height = 'auto'; // 保持图片原始高度
// 将新的img添加到新的div中
div.appendChild(newImage);
// 将新的div添加到帖子内容中
postContent.appendChild(div);
});
}
// 函数:添加下拉框以选择每行图片的数量
function addDropdown() {
let dropdownHTML = `
1 图片每行2 图片每行3 图片每行4 图片每行5 图片每行6 图片每行7 图片每行8 图片每行9 图片每行10 图片每行11 图片每行12 图片每行13 图片每行14 图片每行15 图片每行16 图片每行17 图片每行18 图片每行19 图片每行20 图片每行
`;
document.body.insertAdjacentHTML('beforeend', dropdownHTML);
// 获取上次选择的图片数量
let lastSelected = GM_getValue('lastSelected', 4);
document.getElementById('tutu-select').value = lastSelected;
// 添加下拉框变化的事件监听器
document.getElementById('tutu-select').addEventListener('change', function() {
let rowCount = parseInt(this.value);
// 查找当前帖子的内容元素并应用样式
let postContent = document.querySelector('.t_fsz'); // 修改选择器以匹配帖子内容元素
displayImagesInRow(rowCount, postContent);
// 保存选择的图片数量
GM_setValue('lastSelected', rowCount);
});
}
// 初始化脚本
function init() {
// 默认显示4张图片每行
// 查找当前帖子的内容元素并应用样式
let postContent = document.querySelector('.t_fsz'); // 修改选择器以匹配帖子内容元素
let lastSelected = GM_getValue('lastSelected', 4);
displayImagesInRow(lastSelected, postContent);
// 添加下拉框以选择每行图片的数量
addDropdown();
// 设置帖子内容
postContent.style.width = '120%';
}
// 运行脚本
init();
})();