Greasy Fork is available in English.
把 Twitter/X 的看图体验转化为“微博式”。支持滚轮缩放、拖拽移动、旋转，拥有高通透度且自动对齐的工具栏。
当前为
// ==UserScript==
// @name PILIPLAN - Twitter/X Image Viewer
// @name:zh-CN PILIPLAN - Twitter/X 微博式看图工具
// @namespace https://github.com/PILIPLAN
// @version 1.0
// @description Turns Twitter/X image viewing into a Weibo-like experience. Features: mouse wheel zoom, drag-to-move, rotation, and a high-transparency auto-aligning toolbar.
// @description:zh-CN 把 Twitter/X 的看图体验转化为“微博式”。支持滚轮缩放、拖拽移动、旋转，拥有高通透度且自动对齐的工具栏。
// @author PILIPLAN
// @match https://twitter.com/*
// @match https://x.com/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// Core State
let state = {
scale: 1,
rotate: 0,
x: 0,
y: 0,
isDragging: false,
startX: 0,
startY: 0
};
let activeElement = null;
let toolbar = null;
// --- Core 1: Find Image in Layers ---
function findCenterElement() {
const layersContainer = document.querySelector('#layers');
if (!layersContainer) return null;
const candidates = layersContainer.querySelectorAll('img, div[style*="background-image"]');
let bestCandidate = null;
let minDistance = Infinity;
const anchor = getAnchorPoint();
const centerX = anchor ? anchor.x : window.innerWidth / 2;
const centerY = window.innerHeight / 2;
candidates.forEach(el => {
const rect = el.getBoundingClientRect();
if (rect.width < 50 || rect.height < 50) return;
if (window.getComputedStyle(el).opacity === '0') return;
const dist = Math.sqrt(
Math.pow((rect.left + rect.width / 2) - centerX, 2) +
Math.pow((rect.top + rect.height / 2) - centerY, 2)
);
if (dist < minDistance) {
minDistance = dist;
bestCandidate = el;
}
});
return (minDistance < 600) ? bestCandidate : null;
}
// --- Core 2: Get Anchor Point ---
function getAnchorPoint() {
const likeBtn = document.querySelector('#layers [data-testid="like"], #layers [data-testid="unlike"]');
if (likeBtn) {
const group = likeBtn.closest('[role="group"]');
if (group) {
const rect = group.getBoundingClientRect();
return { x: rect.left + rect.width / 2, y: rect.top };
}
}
return null;
}
// --- Core 3: Update Toolbar Position ---
function updateToolbarPosition() {
if (!toolbar) return;
const anchor = getAnchorPoint();
if (anchor) {
toolbar.style.left = anchor.x + 'px';
const bottomDistance = window.innerHeight - anchor.y + 10;
toolbar.style.bottom = bottomDistance + 'px';
} else {
toolbar.style.left = '50%';
toolbar.style.bottom = '40px';
}
}
// --- Fix Clipping ---
function unclipParents(element) {
if (!element) return;
let parent = element.parentElement;
for (let i = 0; i < 8; i++) {
if (parent && parent.style) {
const style = window.getComputedStyle(parent);
if (style.overflow !== 'visible') parent.style.setProperty('overflow', 'visible', 'important');
if (style.maskType || style.webkitMask) {
parent.style.mask = 'none';
parent.style.webkitMask = 'none';
}
}
parent = parent ? parent.parentElement : null;
}
}
// --- Transform Logic ---
function updateTransform() {
if (!activeElement) activeElement = findCenterElement();
if (!activeElement) return;
unclipParents(activeElement);
activeElement.style.transform = `
translate(${state.x}px, ${state.y}px)
rotate(${state.rotate}deg)
scale(${state.scale})
`;
activeElement.style.transition = state.isDragging ? 'none' : 'transform 0.1s linear';
activeElement.style.cursor = state.isDragging ? 'grabbing' : 'grab';
activeElement.style.zIndex = '9999';
if (activeElement.tagName === 'DIV') activeElement.style.backgroundSize = 'contain';
}
// --- Actions ---
function zoom(delta) {
state.scale += delta;
if (state.scale < 0.1) state.scale = 0.1;
initDragEvents();
updateTransform();
}
function rotate(deg) {
state.rotate += deg;
updateTransform();
}
function reset() {
state = { scale: 1, rotate: 0, x: 0, y: 0, isDragging: false, startX: 0, startY: 0 };
if (activeElement) {
activeElement.style.transform = '';
activeElement.style.cursor = 'grab';
activeElement.style.zIndex = '';
}
}
// --- Global Wheel Interception ---
window.addEventListener('wheel', (e) => {
if (!location.href.includes('/photo/')) return;
const target = findCenterElement();
if (!target) return;
activeElement = target;
e.preventDefault();
e.stopImmediatePropagation();
const delta = e.deltaY > 0 ? -0.1 : 0.1;
zoom(delta);
}, { passive: false });
// --- Drag Logic ---
function initDragEvents() {
if (!activeElement) activeElement = findCenterElement();
if (!activeElement || activeElement.dataset.dragBound) return;
activeElement.dataset.dragBound = 'true';
activeElement.style.cursor = 'grab';
activeElement.addEventListener('mousedown', (e) => {
if (e.button !== 0) return;
e.preventDefault();
e.stopPropagation();
state.isDragging = true;
state.startX = e.clientX - state.x;
state.startY = e.clientY - state.y;
activeElement.style.cursor = 'grabbing';
});
}
window.addEventListener('mousemove', (e) => {
if (!state.isDragging) return;
e.preventDefault();
state.x = e.clientX - state.startX;
state.y = e.clientY - state.startY;
updateTransform();
});
window.addEventListener('mouseup', () => {
state.isDragging = false;
if (activeElement) activeElement.style.cursor = 'grab';
});
// --- UI Toolbar ---
function createToolbar() {
if (document.getElementById('x-fusion-toolbar')) return;
toolbar = document.createElement('div');
toolbar.id = 'x-fusion-toolbar';
// High Transparency Style
toolbar.style.cssText = `
position: fixed;
transform: translateX(-50%);
z-index: 2147483647;
background: rgba(0, 0, 0, 0.3);
padding: 8px 25px;
border-radius: 50px; display: flex; gap: 20px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,0.1);
opacity: 0; pointer-events: none; transition: opacity 0.2s;
`;
toolbar.addEventListener('mousedown', e => e.stopPropagation());
const btns = [
{ t: '⟲', f: () => rotate(-90) },
{ t: '－', f: () => zoom(-0.25) },
{ t: 'RESET', f: reset, s: 'font-size:12px; font-weight:800; letter-spacing:1px;' },
{ t: '＋', f: () => zoom(0.25) },
{ t: '⟳', f: () => rotate(90) }
];
btns.forEach(b => {
const s = document.createElement('span');
s.innerHTML = b.t;
s.style.cssText = `
color: rgba(255, 255, 255, 0.9);
cursor: pointer; font-size: 22px; width: 30px;
display: flex; justify-content: center; align-items: center;
user-select: none; transition: transform 0.1s;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
${b.s||''}
`;
s.onmouseover = () => { s.style.color = '#fff'; s.style.transform = 'scale(1.1)'; };
s.onmouseout = () => { s.style.color = 'rgba(255, 255, 255, 0.9)'; s.style.transform = 'scale(1)'; };
s.onclick = (e) => { e.stopPropagation(); b.f(); };
toolbar.appendChild(s);
});
document.body.appendChild(toolbar);
}
// --- Main Loop ---
function loop() {
const isPhotoView = location.href.includes('/photo/');
if (!toolbar) createToolbar();
if (isPhotoView) {
toolbar.style.opacity = '1';
toolbar.style.pointerEvents = 'auto';
updateToolbarPosition();
if (!activeElement) {
activeElement = findCenterElement();
if (activeElement) initDragEvents();
}
} else {
toolbar.style.opacity = '0';
toolbar.style.pointerEvents = 'none';
if (state.scale !== 1 || state.rotate !== 0) reset();
activeElement = null;
}
}
setInterval(loop, 100);
window.addEventListener('keydown', (e) => {
if (e.key === 'Escape') reset();
});
})();