鼠标悬停 + Ctrl 打开悬浮预览；macOS风格UI，流畅动画
// ==UserScript==
// @name Hover Preview Pro — macOS Style
// @namespace hover-preview-macos
// @version 2.0.0
// @description 鼠标悬停 + Ctrl 打开悬浮预览；macOS风格UI，流畅动画
// @match *://*/*
// @run-at document-idle
// @allFrames true
// @grant GM_addStyle
// ==/UserScript==
(() => {
'use strict';
const MODIFIER = 'Control'; // Control / Shift / Alt
const OPEN_DELAY = 60; // 触发延时
const PANEL_W = 75, PANEL_H = 75;
const css = `
/* 遮罩层 */
.hp-mask {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0);
z-index: 2147483646;
display: none;
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hp-mask.visible {
background: rgba(0, 0, 0, .4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* 主面板 - macOS风格 */
.hp-panel {
position: absolute;
left: 50%;
top: 50%;
width: ${PANEL_W}vw;
height: ${PANEL_H}vh;
min-width: 600px;
min-height: 400px;
transform: translate(-50%, -50%) scale(0.85);
background: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(251,251,253,0.94) 100%);
border-radius: 12px;
box-shadow:
0 22px 70px rgba(0, 0, 0, 0.25),
0 10px 30px rgba(0, 0, 0, 0.12),
0 0 0 0.5px rgba(0, 0, 0, 0.08),
inset 0 0 0 0.5px rgba(255, 255, 255, 0.8);
display: grid;
grid-template-rows: 38px 1fr;
overflow: hidden;
opacity: 0;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hp-panel.visible {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
/* 标题栏 - 仿 macOS */
.hp-header {
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
background: linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.45) 100%);
border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
cursor: move;
user-select: none;
-webkit-app-region: drag;
}
/* 窗口控制按钮组 */
.hp-controls {
display: flex;
gap: 8px;
align-items: center;
}
/* macOS 风格圆形按钮 */
.hp-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 0.5px solid rgba(0, 0, 0, 0.12);
cursor: pointer;
transition: all 0.2s ease;
-webkit-app-region: no-drag;
}
.hp-dot-close {
background: linear-gradient(180deg, #FF5F57 0%, #FF3B30 100%);
}
.hp-dot-minimize {
background: linear-gradient(180deg, #FFBD2E 0%, #FFA500 100%);
}
.hp-dot-maximize {
background: linear-gradient(180deg, #28CA42 0%, #00C800 100%);
}
.hp-controls:hover .hp-dot-close::after {
content: "×";
color: rgba(0, 0, 0, 0.5);
font-size: 10px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
margin-top: -1px;
}
.hp-controls:hover .hp-dot-minimize::after {
content: "−";
color: rgba(0, 0, 0, 0.5);
font-size: 10px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
margin-top: -2px;
}
.hp-dot:hover {
filter: brightness(0.9);
}
.hp-dot:active {
filter: brightness(0.8);
}
/* 标题文字 */
.hp-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font: 500 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
color: #3C3C43;
text-align: center;
margin-right: 60px;
}
/* 新标签打开按钮 */
.hp-btn {
appearance: none;
border: 0;
background: linear-gradient(180deg, rgba(0,122,255,0.9) 0%, rgba(0,100,220,0.9) 100%);
color: #fff;
padding: 5px 12px;
border-radius: 6px;
cursor: pointer;
font: 500 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 122, 255, 0.3);
-webkit-app-region: no-drag;
}
.hp-btn:hover {
background: linear-gradient(180deg, rgba(0,122,255,1) 0%, rgba(0,100,220,1) 100%);
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 122, 255, 0.4);
}
.hp-btn:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 122, 255, 0.3);
}
/* 内容区域 */
.hp-body {
position: relative;
background: #FFFFFF;
overflow: hidden;
}
/* iframe 和图片 */
.hp-iframe, .hp-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
object-fit: contain;
background: #FFFFFF;
}
/* 加载和错误提示 */
.hp-tip {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 16px 24px;
border-radius: 12px;
background: linear-gradient(145deg, rgba(255,255,255,0.98) 0%, rgba(245,245,247,0.95) 100%);
color: #1C1C1E;
font: 400 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
text-align: center;
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.12),
0 2px 10px rgba(0, 0, 0, 0.06);
animation: tipFadeIn 0.3s ease-out;
}
@keyframes tipFadeIn {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(0.9);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
/* 加载动画 */
.hp-loading {
display: inline-block;
width: 24px;
height: 24px;
margin: 0 auto 12px;
border: 3px solid rgba(0, 122, 255, 0.2);
border-top-color: #007AFF;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
.hp-panel {
background: linear-gradient(145deg, rgba(40,40,42,0.96) 0%, rgba(35,35,37,0.94) 100%);
box-shadow:
0 22px 70px rgba(0, 0, 0, 0.5),
0 10px 30px rgba(0, 0, 0, 0.3),
inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
}
.hp-header {
background: linear-gradient(180deg, rgba(60,60,62,0.65) 0%, rgba(50,50,52,0.45) 100%);
border-bottom-color: rgba(255, 255, 255, 0.1);
}
.hp-title {
color: #F2F2F7;
}
.hp-body {
background: #1C1C1E;
}
.hp-iframe, .hp-img {
background: #1C1C1E;
}
.hp-tip {
background: linear-gradient(145deg, rgba(45,45,47,0.98) 0%, rgba(35,35,37,0.95) 100%);
color: #F2F2F7;
}
}
/* 过渡动画优化 */
.hp-panel.closing {
transform: translate(-50%, -50%) scale(0.9);
opacity: 0;
transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
`;
(typeof GM_addStyle === 'function')
? GM_addStyle(css)
: document.head.appendChild(Object.assign(document.createElement('style'), { textContent: css }));
// UI
const mask = div('hp-mask');
const panel = div('hp-panel');
const header = div('hp-header');
// macOS 风格控制按钮
const controls = div('hp-controls');
const closeBtn = div('hp-dot hp-dot-close');
const minimizeBtn = div('hp-dot hp-dot-minimize');
const maximizeBtn = div('hp-dot hp-dot-maximize');
controls.append(closeBtn, minimizeBtn, maximizeBtn);
const title = div('hp-title');
const openBtn = btn('新标签打开');
const body = div('hp-body');
header.append(controls, title, openBtn);
panel.append(header, body);
mask.append(panel);
document.documentElement.appendChild(mask);
// 事件绑定
closeBtn.addEventListener('click', hide);
minimizeBtn.addEventListener('click', hide); // 暂时也是关闭
maximizeBtn.addEventListener('click', () => {
// 切换全屏
if (panel.style.width === '95vw') {
panel.style.width = `${PANEL_W}vw`;
panel.style.height = `${PANEL_H}vh`;
} else {
panel.style.width = '95vw';
panel.style.height = '95vh';
}
});
mask.addEventListener('click', e => { if (e.target === mask) hide(); });
document.addEventListener('keydown', e => { if (e.key === 'Escape') hide(); }, true);
makeDraggable(panel, header);
// 状态
let lastX = 0, lastY = 0;
let timer = null;
// 捕获阶段
document.addEventListener('mousemove', e => {
lastX = e.clientX; lastY = e.clientY;
}, { passive:true, capture:true });
document.addEventListener('keydown', e => {
if (!matchMod(e, MODIFIER)) return;
clearTimeout(timer);
timer = setTimeout(() => {
const el = document.elementFromPoint(lastX, lastY);
const url = resolveUrl(el);
if (url) open(url);
}, OPEN_DELAY);
}, true);
document.addEventListener('keyup', e => {
if (e.key === MODIFIER || (MODIFIER === 'Control' && e.key === 'Control')) {
clearTimeout(timer);
}
}, true);
// ====== 核心逻辑：URL 解析 ======
function resolveUrl(start) {
if (!start) return null;
// 1) 当前元素自己或其后代里是否有 <a>
const selfA = (start.matches?.('a[href]') ? start : start.querySelector?.('a[href]'));
if (isGoodA(selfA)) return abs(selfA.getAttribute('href'));
// 2) 向上查找包含当前元素的 <a> 标签
let cur = start;
while (cur && cur !== document.documentElement) {
if (cur.matches?.('a[href]') && isGoodA(cur)) {
return abs(cur.getAttribute('href'));
}
cur = cur.parentElement;
}
// 3) 在同一个父节点里（兄弟）找 <a>
const p = start.parentElement;
if (p) {
const sibA = p.querySelector('a[href]');
if (isGoodA(sibA)) return abs(sibA.getAttribute('href'));
const altA = p.querySelector('a[href*=".htm"], a[href*="/profile/"], a[class*="images"][href]');
if (isGoodA(altA)) return abs(altA.getAttribute('href'));
}
// 4) 再往上 2~3 层
cur = start;
for (let i=0; i<3 && cur && cur !== document.documentElement; i++) {
cur = cur.parentElement;
if (!cur) break;
const a1 = cur.querySelector('a[class*="images"][href]') || cur.querySelector('a[href*="/profile/"]') || cur.querySelector('a[href]');
if (isGoodA(a1)) return abs(a1.getAttribute('href'));
const img = cur.querySelector('img[srcset], img[src]');
if (img) {
const u = bestSrcFromSrcset(img) || img.getAttribute('src');
if (isHttp(u)) return abs(u);
}
}
// 5) 背景图兜底
const bg = getComputedStyle(start).backgroundImage;
const m = /url\(["']?([^"')]+)["']?\)/.exec(bg || '');
if (m && isHttp(m[1])) return abs(m[1]);
return null;
}
// ====== 打开预览 ======
function open(url) {
body.innerHTML = '';
title.textContent = decodeURI(url.split('/').pop() || url);
openBtn.onclick = () => window.open(url, '_blank', 'noopener,noreferrer');
// 显示动画
mask.style.display = 'block';
requestAnimationFrame(() => {
mask.classList.add('visible');
panel.classList.add('visible');
});
if (isImage(url)) {
const img = new Image();
img.className = 'hp-img';
img.referrerPolicy = 'no-referrer';
img.onerror = () => showBlocked('图片加载失败');
img.src = url;
body.appendChild(img);
return;
}
const ifr = document.createElement('iframe');
ifr.className = 'hp-iframe';
ifr.setAttribute('sandbox','allow-same-origin allow-scripts allow-forms allow-popups allow-pointer-lock');
const loading = div('hp-tip');
loading.innerHTML = '<div class="hp-loading"></div>正在加载预览…';
body.appendChild(loading);
let loaded = false;
ifr.addEventListener('load', () => {
loaded = true;
loading.remove();
});
setTimeout(() => {
if (!loaded) showBlocked('此站点禁止在 iframe 中预览');
}, 2000);
ifr.src = url;
body.appendChild(ifr);
}
// ====== 工具函数 ======
function isGoodA(a){
return a && a.getAttribute && a.getAttribute('href') && !a.getAttribute('href').startsWith('javascript:');
}
function bestSrcFromSrcset(img){
const ss = img.getAttribute('srcset');
if (!ss) return null;
const items = ss.split(',').map(s=>s.trim()).map(s=>{
const m=s.match(/(\S+)\s+(\d+\.?\d*)(w|x)/i);
return m ? {url:m[1], val:parseFloat(m[2])} : {url:s.split(/\s+/)[0], val:1};
});
items.sort((a,b)=>b.val-a.val);
return items[0]?.url || null;
}
function isHttp(u){ return /^https?:\/\//i.test(u); }
function isImage(u){ return /\.(png|jpe?g|gif|webp|svg|bmp|avif)(\?|#|$)/i.test(u); }
function abs(u){ return new URL(u, location.href).href; }
function matchMod(e, name){
return (name==='Control'&&e.ctrlKey)||(name==='Shift'&&e.shiftKey)||(name==='Alt'&&e.altKey);
}
function showBlocked(msg){
body.querySelectorAll('.hp-tip').forEach(n=>n.remove());
const d=div('hp-tip');
d.innerHTML = `<strong>${msg}</strong><br><br>点击 "新标签打开" 在新窗口查看`;
body.appendChild(d);
}
function show(){
mask.style.display = 'block';
requestAnimationFrame(() => {
mask.classList.add('visible');
panel.classList.add('visible');
});
}
function hide(){
panel.classList.add('closing');
panel.classList.remove('visible');
mask.classList.remove('visible');
setTimeout(() => {
mask.style.display = 'none';
panel.classList.remove('closing');
body.innerHTML = '';
}, 200);
}
function div(cls){
const d=document.createElement('div');
if (cls) d.className = cls;
return d;
}
function btn(t,cls='hp-btn'){
const b=document.createElement('button');
b.className = cls;
b.textContent = t;
return b;
}
function makeDraggable(container, handle){
let sx=0, sy=0, ox=0, oy=0, dragging=false;
handle.addEventListener('mousedown', (e)=>{
// 排除控制按钮
if (e.target.classList.contains('hp-dot') || e.target.classList.contains('hp-btn')) return;
if (e.button!==0) return;
dragging=true;
const r=container.getBoundingClientRect();
ox=r.left; oy=r.top; sx=e.clientX; sy=e.clientY;
document.addEventListener('mousemove', move, true);
document.addEventListener('mouseup', up, true);
e.preventDefault();
}, true);
function move(e){
if(!dragging) return;
const dx=e.clientX-sx, dy=e.clientY-sy;
container.style.left = `${ox + dx + container.offsetWidth/2}px`;
container.style.top = `${oy + dy + container.offsetHeight/2}px`;
container.style.transform = 'translate(-50%, -50%)';
}
function up(){
dragging=false;
document.removeEventListener('mousemove', move, true);
document.removeEventListener('mouseup', up, true);
}
}
})();