彩蛋?什么彩蛋?
今天突然灵光一现,有没有什么办法能在ns整点活,突然想到一种彩蛋的形式,比如下面的这张图
如果你有脚本将会显示下面的效果
是不是很神奇!
如果你也想要同款效果 可以使用tempmonkey加载下面的脚本
没有加载脚本是显示不出来的哦~ (所以叫彩蛋?)
申明
1.本代码由我与GPT5共同实现
(最近要是有大模型善后工程师,我肯定考核第一)
2.别拿来干坏事!!!别拿来干坏事!!!别拿来干坏事!!!
tempmonkey脚本代码部分
// ==UserScript==// @name Nodeseek 彩蛋隐藏图// @namespace http://tampermonkey.net/// @version 1.57// @description 自动锁定原图尺寸,cover 自适应显示,继承原样式并在有彩蛋时添加主题适配外框。// @match https://www.nodeseek.com/post-*// @grant none// @author README(NodeSeek.com) with GPT5// ==/UserScript==(function() { 'use strict'; const fadeMs = 200; const maxWidthRatio = 0.95; // 对应 post-content 的 95% /** ======== 样式注入 ======== */ const style = document.createElement('style'); style.textContent = ` .caidan-wrapper { position: relative; display: block; overflow: hidden; margin: 1rem 2.5%; box-shadow: 0 0 4px rgba(0, 0, 0, .4); max-width: 95%; border-radius: 4px; } .caidan-wrapper.caidan-has-egg { border: 1.5px solid rgba(0, 200, 0, 0.25); } body.dark-layout .caidan-wrapper.caidan-has-egg { border-color: rgba(255, 255, 255, 0.25); } .caidan-wrapper > img { width: 100%; height: 100%; max-width: none !important; max-height: none !important; object-fit: cover; display: block; margin: 0 !important; box-shadow: none !important; transition: opacity ${fadeMs}ms linear; } /* 悬停外框轻微高亮 */ .caidan-wrapper.caidan-has-egg:hover { border-color: rgba(0, 200, 0, 0.4); } body.dark-layout .caidan-wrapper.caidan-has-egg:hover { border-color: rgba(255, 255, 255, 0.4); } `; document.head.appendChild(style); /** ======== 工具函数 ======== */ function decodeJumpUrl(url) { try { const u = new URL(url, location.href); if (u.pathname.startsWith('/jump')) { const to = u.searchParams.get('to'); return decodeURIComponent(to); } return url; } catch { return url; } } function preloadImage(url) { const img = new Image(); img.src = url; } /** ======== 动态尺寸计算 ======== */ function resizeWrapper(wrapper) { if (!wrapper.dataset.ratio) return; const parent = wrapper.closest('.post-content') || document.body; const containerWidth = parent.clientWidth * maxWidthRatio; const ratio = parseFloat(wrapper.dataset.ratio); wrapper.style.width = `${containerWidth}px`; wrapper.style.height = `${containerWidth / ratio}px`; } function bindResize(wrapper) { const resizeHandler = () => resizeWrapper(wrapper); window.addEventListener('resize', resizeHandler); // 立即执行一次 resizeHandler(); } /** ======== 创建包裹容器并自动计算 ======== */ function wrapImage(img, hasEgg = false) { if (img.parentElement?.classList.contains('caidan-wrapper')) return img.parentElement; const wrapper = document.createElement('div'); wrapper.className = 'caidan-wrapper'; if (hasEgg) wrapper.classList.add('caidan-has-egg'); // 监听图片加载后记录比例并计算尺寸 const lock = () => { const w = img.naturalWidth || img.width; const h = img.naturalHeight || img.height; if (w && h) { const ratio = w / h; wrapper.dataset.ratio = ratio; bindResize(wrapper); } }; if (img.complete) lock(); else img.addEventListener('load', lock, { once: true }); // 移除 img 自身样式影响 img.style.margin = '0'; img.style.boxShadow = 'none'; img.parentElement.insertBefore(wrapper, img); wrapper.appendChild(img); return wrapper; } /** ======== 主逻辑 ======== */ function attachEgg(img, hiddenUrl) { if (img.dataset.caidanDone) return; img.dataset.caidanDone = '1'; img.dataset.caidanOrig = img.src; img.dataset.caidanHover = hiddenUrl; const wrapper = wrapImage(img, true); preloadImage(hiddenUrl); const fadeSwitch = (src) => { img.style.opacity = '0'; setTimeout(() => { img.src = src; setTimeout(() => (img.style.opacity = '1'), 20); }, fadeMs / 2); }; wrapper.addEventListener('mouseenter', () => fadeSwitch(img.dataset.caidanHover)); wrapper.addEventListener('mouseleave', () => fadeSwitch(img.dataset.caidanOrig)); } function process() { document.querySelectorAll('article.post-content img').forEach(img => { const next = img.closest('p')?.querySelector('a[href]:empty'); if (!next) { wrapImage(img, false); return; } const realUrl = decodeJumpUrl(next.href); if (realUrl && realUrl !== img.src) attachEgg(img, realUrl); }); } new MutationObserver(() => process()).observe(document.body, { childList: true, subtree: true }); if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', process); } else { process(); }})();如何使用
基本格式:{显示图片的md}{彩蛋链接的md}markdown:[](彩蛋的链接)示例格式:[](https://cdn.nodeimage.com/i/bsO8b4gmuYa5qFtsivZ0qnj9uBppitsN.webp)v2预想
- 加入密钥的功能
- 视频?虽然通过链接的扩展名,但是好像...
欢迎来点馊主意
评论 (0)