惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

D
Docker
阮一峰的网络日志
阮一峰的网络日志
T
Tailwind CSS Blog
博客园 - 【当耐特】
量子位
博客园 - 叶小钗
有赞技术团队
有赞技术团队
Jina AI
Jina AI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - Franky
博客园 - 司徒正美
爱范儿
爱范儿
美团技术团队
小众软件
小众软件
酷 壳 – CoolShell
酷 壳 – CoolShell
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
V
V2EX
罗磊的独立博客
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Last Week in AI
Last Week in AI
Hugging Face - Blog
Hugging Face - Blog
I
InfoQ
D
DataBreaches.Net
宝玉的分享
宝玉的分享

Labyrinth.

关于终止对站点的维护一事 // DECRYPTED_DATA >> Rinth[X] Terminal 互联网就应该是这样一个地球村…… // DECRYPTED_DATA >> Rinth[X] Terminal 聊一聊域名的选择 // DECRYPTED_DATA >> Rinth[X] Terminal 【老文章翻译】"FUCK"的千种用法 // DECRYPTED_DATA >> Rinth[X] Terminal 玩转VSCode插件市场:这十个插件值得安装! // DECRYPTED_DATA >> Rinth[X] Terminal 9.9/月!独立v4香港2c2g轻量,7inet新年活动 // DECRYPTED_DATA >> Rinth[X] Terminal 我的作品 // DECRYPTED_DATA >> Rinth[X] Terminal GTX460 WHDI显卡:昙花一现的无线未来 // DECRYPTED_DATA >> Rinth[X] Terminal 从Include地狱到可维护:我是如何构建起这个博客 // DECRYPTED_DATA >> Rinth[X] Terminal 为什么我要重写本站 // DECRYPTED_DATA >> Rinth[X] Terminal 利用Koishi搭建QQ机器人(官方API/Napcat) // DECRYPTED_DATA >> Rinth[X] Terminal SELF(); // DECRYPTED_DATA >> Rinth[X] Terminal
简单粗暴的实现更好的博客图片预览 // DECRYPTED_DATA >> Rin...
RinthX · 2026-02-25 · via Labyrinth.

我的博客一直缺一个图片预览功能,我显然是想把它做的很好,但是我没有那么多闲时间去写、测试了。
当然,我用ci写的那坨使里面有现成的代码可以搬,为什么不用呢?~因为我懒~
呃,就是那坨使,之所以叫使是有原因的。
所以我用了简单的步骤,解决了图片不能预览的问题:

                function openWindow(url,name) {
                const specs = "width=1200,height=800";
                window.open(url, name, specs);
                }
                const articlesection = document.getElementById('articleO');
                articlesection.addEventListener('click', (event) => {
                        const target = event.target;
                        if (target.tagName === 'IMG'){
                                const src = target.src;
                                const alt = target.alt;
                                openWindow(src,alt);
                        }
                });

之后,我在<article>添加了id='articleO',然后上线了。
为什么叫articleO?因为我瞎打的;为什么加O?我怕以后跟某个功能的id冲突,总之就是这样。
你可以用下面这张图片试试效果:

IMG:TEST