保国逛色花

最好用的98堂(原色花堂)脚本 高级搜索 自动签到 快速复制 快速评分 划词搜索 图片预览 快速收藏

< Feedback on 保国逛色花

Review: Good - script works

§
Posted: 2024-05-18

能否添加功能,就是图贴》》》》一行显示多张图。。。这样方便预览。
我的代码并不完全成功。抛砖引玉
// ==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();

// 设置帖子内容

标签的宽度为原来的120%
postContent.style.width = '120%';
}

// 运行脚本
init();
})();

Post reply

Sign in to post a reply.