司机社
标题:
拿ai写了个脚本优化浏览界面的帖子的预览图
[打印本页]
作者:
sjszhphongx
时间:
2025-10-10 13:20
标题:
拿ai写了个脚本优化浏览界面的帖子的预览图
// ==UserScript==
7 h# f f# o. X) h) i5 L: e4 k
// [url=home.php?mod=space&uid=39007]@name[/url] 统一高度调整背景图片
: J8 @# ], l' d* q5 _- J! z+ L
// [url=home.php?mod=space&uid=603843]@namespace[/url] http://tampermonkey.net/
, L( o" S1 T" D6 B" R
// @version 1.6
% C; s" E% Q ^0 h7 k+ G0 s
// @description 在特定网站统一调整背景图片高度
7 ]7 ~# H& w3 R0 M" Y! ~1 n
// @author Your Name
) @1 ?7 |4 z, l% Y6 q* i
// @match *://*xsijishe.com/*
/ K1 l5 ^3 Z+ T9 {( Y7 r& [$ Q R
// @match *://*sjs47.com/*
$ E( A2 G& O( s" p+ U
// @grant none
, ^# r: L# q, Y+ J
// ==/UserScript==
0 t9 M: d! L+ d- k3 `& Q* b9 `
8 u5 ]. [! o; E
(function() {
: x+ @) d0 U) t+ H; J& y
'use strict';
; Z m. H; V" T/ L* q7 {
. s+ F. N7 \9 U( a# W
let executionCount = 0;
. E [- h0 R. a1 }' [
const maxExecutions = 2;
0 X K8 S1 }7 X- |
const interval = 5000; // 5秒
8 J% n3 R& p# N$ o6 @% j2 A
7 ~ r% }6 x1 H# F+ E" f
const executeLogic = () => {
' s5 U7 {, m1 A1 t9 P
// 获取所有的 <div class="nex_thread_pics">
9 q9 }: F C% j7 x6 ^
const divs = document.querySelectorAll('div.nex_thread_pics');
6 _, s8 o2 W2 n# a
7 p! \. `3 Z0 `: q
// 遍历每个 <div>
# {3 f- q+ W9 z+ G, D
divs.forEach(div => {
' Z: Z$ i: @2 V7 V
// 获取 <div> 中的 <a> 标签
' p1 H% l1 l7 ~" v+ G
const links = div.querySelectorAll('a');
0 R- A" w2 X) D0 w( ~
# B; Y; ?3 Z) L6 u0 K
links.forEach(link => {
7 k# s5 K* l# Z/ C
// 使用 getComputedStyle 获取计算后的样式
Y3 A. _5 P3 K+ p6 W1 c5 i
const style = window.getComputedStyle(link).backgroundImage;
4 R) g9 q; z' V) M
5 I$ m. ]* ~* I8 J# j4 o
// 检查是否包含背景图像
4 Z' s! N* i9 M" a5 q/ f7 g
if (style && style.includes('url(')) {
$ T/ R4 s/ z. m. s
// 提取背景图像的 URL
9 Z# L7 U1 u# z% B
const urlMatch = style.match(/url\(\s*['"]?(.*?)['"]?\s*\)/);
3 Z# T N/ {8 u8 A: y1 \
if (urlMatch) {
: }2 A4 l" L0 D+ R' _; T6 x
const url = urlMatch[1].trim();
1 I6 b" r0 Q% i
^4 I2 _- w/ T8 d+ y
// 创建一个图像对象来获取宽高
! d2 t2 @ \) Z3 l) E3 G
const img = new Image();
4 E% [9 j: q/ O6 H) x; m4 t
img.src = url;
" y' t+ c, J7 [/ _) |& ~3 ^
) D, w) `( @+ O6 i' c3 y) ~. ?* m' v
img.onload = () => {
' O4 _! @( K# r0 t r
// 获取原始宽高
, W# T- x# u5 o6 c0 G3 }: p6 z2 v$ w1 u
const originalWidth = img.width;
& u- \# G t' ?- W4 l
const originalHeight = img.height;
; G1 c/ v% K* O6 n
" R$ E1 E9 B6 [ M$ D$ H
// 计算新的宽度,保持高宽比
$ H9 A% x' U: l7 P+ f; B% q2 b1 H
const newHeight = 120;
% N7 B# Q2 o9 d C
const newWidth = (originalWidth / originalHeight) * newHeight;
( O# T% [3 A' G B
; R9 U6 T4 p% l) U& U' M
// 设置 <a> 标签的大小
2 F" U8 ?+ e2 c" R2 `/ I
link.style.width = `${newWidth}px`;
- V* @9 I, U, h( T; C! u. e8 v$ o
link.style.height = `${newHeight}px`;
: h; p' q- h7 h- U/ }+ x
};
( W9 K" a& }! @
}
h; i; {- a# O9 X4 u
}
; {1 o4 d+ u" U1 A! @
});
1 M5 a: U% l, k* |- Y& r8 }
});
6 N# q- e' P/ C1 c Y5 W
: e5 @# d6 O) W# h
executionCount++;
, \' d4 q/ G2 `; B+ Q0 U9 z3 J
if (executionCount >= maxExecutions) {
) J( L' d* W2 Q/ R/ T
clearInterval(intervalId);
; S- O$ `+ v" I; n; V
}
; l5 S. b. T: _1 e) H+ p Z
};
& W. B) i* m+ X+ Y% x7 |. N
6 c3 {) F$ B* l; w/ z3 J
// 页面开始加载后 5 秒执行一次
d- I3 `+ A$ S" D
const intervalId = setInterval(executeLogic, interval);
! N+ \1 Z7 t( L( A* N% Q
( H6 q1 ~* G2 P J }# v
// 页面加载完成后立即执行一次
; ~8 E& I% z4 a+ g3 @- \) ]9 s
window.addEventListener('load', () => {
! p# Z" k! }' z! Z9 w$ L
executeLogic(); // 立即执行一次
0 \4 P: u# {5 h# o7 S j
});
# C- Y. g( ?5 L( S$ X7 Y
})();
+ ^# z$ m: S/ D$ z
复制代码
9 Q8 i4 U! E+ y+ W. F
# N$ o, I* [" |3 r
1 c6 ^& X a. |" a. n: l
解决了那种竖着的图片在帖子预览的时候会被切掉的问题
欢迎光临 司机社 (https://xsijishe.net/)
Powered by Discuz! X3.4