彩蛋?什么彩蛋?

今天突然灵光一现,有没有什么办法能在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:![](显示图片的链接)[](彩蛋的链接)示例格式:![90lpKyAdihOgJCygkY5r1YzcthlXynEy.webp](https://cdn.nodeimage.com/i/90lpKyAdihOgJCygkY5r1YzcthlXynEy.webp)[](https://cdn.nodeimage.com/i/bsO8b4gmuYa5qFtsivZ0qnj9uBppitsN.webp)

v2预想

  1. 加入密钥的功能
  2. 视频?虽然通过链接的扩展名,但是好像...

欢迎来点馊主意