人在无端微笑时，不是百无聊赖，就是痛苦难当。——王小波 分享一个通过css实现的卡片悬停效果 代码地址：cards: 悬浮卡片 在线演示：Document <p><img src="/img/oss/picGo/20230730191957.png"></p> </article><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF/">前端</a></div><div class="post-share"><div class="social-share" data-image="/img/head.png" data-sites="facebook,x,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.6/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.6/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><a class="pagination-related" href="/2023/07/31/jenkins%E9%85%8D%E7%BD%AE%E5%B9%B6%E8%A1%8C%E9%A1%B9%E7%9B%AE%E6%95%B0%E9%87%8F/" title="jenkins配置并行项目数量"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info"><div class="info-1"><div class="info-item-1">上一篇</div><div class="info-item-2">jenkins配置并行项目数量</div></div><div class="info-2"><div class="info-item-1"> 纯洁的灵魂，是世界上最珍贵的东西——爱默生 配置方式有小改动，现在在这里配置： 然后选择 就是这个执行者数量 </div></div></div></a><a class="pagination-related" href="/2023/07/29/pixelmatch/" title="pixelmatch"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-right"><div class="info-1"><div class="info-item-1">下一篇</div><div class="info-item-2">pixelmatch</div></div><div class="info-2"><div class="info-item-1"> 不读书的家庭，就是精神上残缺的家庭。——巴甫连柯 分享一个最小、最简单、最快的 JavaScript 像素级图像比较库 https://github.com/mapbox/pixelmatch </div></div></div></a></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><a class="pagination-related" href="/2022/02/05/%E6%A0%87%E7%AD%BE%E6%A8%A1%E6%9D%BF/" title="标签模板"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2022-02-05</div><div class="info-item-2">标签模板</div></div><div class="info-2"><div class="info-item-1"> 不慕古，不留今，与时变，与俗化。——《管子·正世》 按照阮一峰ES6入门中写到的 我们可以使用函数名+模板字符串写法来调用函数，例如： 定义这样一个函数 123function templateFun(arguments){ return `Hello ${arguments[0]}!`} 这里简单用模板字符串，返回Hello +参数数组第一项元素+! 我们普通调用写法： 1templateFun(['Ruben']) 输出'Hello Ruben!' 我们如果使用标签模板，写法如下： 1templateFun`Ruben` 如果其中有变量，则会进行剥离拆分，我们对函数稍加修改，参数改为可变参数 12345function templateFun(...arguments){ console.log(arguments) return `Hello ${arguments}!`}templateFun`Ruben${'...</div></div></div></a><a class="pagination-related" href="/2024/12/10/Crawlee/" title="Crawlee"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2024-12-10</div><div class="info-item-2">Crawlee</div></div><div class="info-2"><div class="info-item-1"> 芸芸众生，孰不爱生?爱生之极，进而爱群。 —— 秋瑾 Crawlee——一个用于 Node.js 的网络抓取和浏览器自动化库，用于构建可靠的爬虫。在 JavaScript 和 TypeScript 中。提取 AI、 LLMs 、RAG 或 GPT 的数据。从网站下载 HTML、PDF、JPG、PNG 和其他文件。适用于 Puppeteer、Playwright、Cheerio、JSDOM 和原始 HTTP。有头模式和无头模式。通过代理轮换。 Crawlee 涵盖了端到端的爬行和抓取，并帮助您构建可靠的抓取工具。快速地。 即使使用默认配置，您的爬虫也会像人类一样出现并在现代机器人保护的雷达下飞行。 Crawlee 为您提供了在网络上抓取链接、抓取数据并将其存储到磁盘或云的工具，同时保持可配置以满足您的项目需求。 Crawlee 可作为crawlee NPM 包使用。 👉在Crawlee 项目网站上查看完整文档、指南和示例👈 Crawlee for Python 对早期采用者开放。 🐍 👉 查看源代码 👈 . 使用 Crawlee CLI 尝试 Crawlee ...</div></div></div></a><a class="pagination-related" href="/2025/09/04/cat-catch/" title="cat-catch"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2025-09-04</div><div class="info-item-2">cat-catch</div></div><div class="info-2"><div class="info-item-1"> 人之贤不肖譬如鼠矣，在所自处耳！――《李斯列传》 https://github.com/xifangczy/cat-catch 要说资源嗅探工具里最有名、最实用、最被广大网友熟知的，猫抓（cat-catch）绝对榜上有名。作为一款浏览器资源嗅探扩展，猫抓的定位就是帮你在当前网页上筛选、列出所有可见的资源链接，比如视频、音频、图片等，哪怕是隐藏得很深的媒体流都能一网打尽。支持Chrome、Edge、Firefox甚至Edge Android，安装方式极为简单，官方应用商店一键获取，也可以源码安装或crx手动安装，不论你是小白用户还是技术党都没障碍。 猫抓的界面非常直观，装好后在浏览器扩展区点一下，弹出的popup界面会自动检测当前页面的所有资源，按类型分类显示。比如你在视频网站，能看到.mp4/.m3u8/.flv等音视频流，常见的m3u8流还内置了解析器，可以直接复制下载链接，甚至还能用内置工具解析分段、拼接资源，方便你做后续处理。除此之外，猫抓也兼容各种流行网站的资源结构，日常追剧、下视频、扒站素材都能用得上。最贴心的是，猫抓所有数据都本地处理，不会收集...</div></div></div></a><a class="pagination-related" href="/2021/01/10/jsDate%E5%AF%B9%E8%B1%A1%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C/" title="jsDate对象基本操作"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2021-01-10</div><div class="info-item-2">jsDate对象基本操作</div></div><div class="info-2"><div class="info-item-1"> 要得到你想要的某件东西，最可靠的办法是让你自己配得上它。——查理·芒格 搬运菜鸟教程 JavaScript Date 对象Date 对象Date 对象用于处理日期和时间。 创建 Date 对象的语法：1var myDate=new Date() **注释：**Date 对象会自动把当前日期和时间保存为其初始值。 Date 对象属性 属性 描述 constructor 返回对创建此对象的 Date 函数的引用。 prototype 使您有能力向对象添加属性和方法。 Date 对象方法 方法 描述 Date() 返回当日的日期和时间。 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 getFullYear() 从 Date 对象以四位数字返回年份。 getYear() 请使用 getFullYear() 方法代替。 getHours() 返回 Date ...</div></div></div></a><a class="pagination-related" href="/2022/04/15/js%E4%B8%ADeval/" title="js中eval"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2022-04-15</div><div class="info-item-2">js中eval</div></div><div class="info-2"><div class="info-item-1"> 如果你来访我，我不在，请和我门外的花坐一会儿，它们很温暖，我注视他们很多很多日子了。——汪曾祺 今天发现这么一个函数eval eval能够将传入的字符串当做js代码执行 例如处理json(请不要这样使用，正确的做法应该是使用JSON.parse(data))： 12let data = '{"nane":"ruben","age":11}'eval("("+data+")") 1234567891011console.log(eval('2 + 2'));// expected output: 4console.log(eval(new String('2 + 2')));// expected output: 2 + 2console.log(eval('2 + 2') === eval('4'));// expected output: truecon...</div></div></div></a><a class="pagination-related" href="/2021/12/18/layui%E6%A8%A1%E5%9D%97%E5%85%A5%E9%97%A8/" title="layui模块入门"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2021-12-18</div><div class="info-item-2">layui模块入门</div></div><div class="info-2"><div class="info-item-1"> 天才绝不应鄙视勤奋。—— 小普林尼 今天写了写layui自定义模块 12345678layui.define(['layer'], (exports) => { // 需确保您的 layui.js 是引入的构建后的版本（即官网下载或 git 平台的发行版） //直接可得到各种内置模块 var layer = layui.layer //… layer.msg('Hello World'); exports('ruben', {}); //注意，这里是模块输出的核心，模块名必须和 use 时的模块名一致}); 然后引用自己写的自定义模块 12345678910111213141516171819<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="style...</div></div></div></a></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info text-center"><div class="avatar-img"><img src="/img/head.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info-name">阿超</div><div class="author-info-description">我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度</div><div class="site-data"><a href="/archives/"><div class="headline">文章</div><div class="length-num">2239</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">35</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/VampireAchao"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2026/07/15/hallmark/" title="hallmark">hallmark</a><time datetime="2026-07-15T01:43:35.000Z" title="发表于 2026-07-15 09:43:35">2026-07-15</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2026/07/14/OpenCut/" title="OpenCut">OpenCut</a><time datetime="2026-07-14T01:16:21.000Z" title="发表于 2026-07-14 09:16:21">2026-07-14</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2026/07/13/destructive-command-guard/" title="destructive_command_guard">destructive_command_guard</a><time datetime="2026-07-13T08:34:40.000Z" title="发表于 2026-07-13 16:34:40">2026-07-13</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2026/07/12/DesktopCommanderMCP/" title="DesktopCommanderMCP">DesktopCommanderMCP</a><time datetime="2026-07-12T14:54:50.000Z" title="发表于 2026-07-12 22:54:50">2026-07-12</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2026/07/11/Catch2/" title="Catch2">Catch2</a><time datetime="2026-07-11T13:53:42.000Z" title="发表于 2026-07-11 21:53:42">2026-07-11</time></div></div></div></div></div></div></main><footer id="footer"><div class="footer-other"><div class="footer-copyright"><span class="copyright">© 2025 - 2026 By 阿超</span><span class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo 8.1.1</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly 5.5.4</a></span></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="日间和夜间模式切换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js?v=5.5.4"></script><script src="/js/main.js?v=5.5.4"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><i class="fas fa-spinner fa-pulse" id="loading-status" hidden="hidden"></i><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="text-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span> 数据加载中</span></div><div class="local-search-input"><input placeholder="搜索文章" type="text"/></div><hr/><div id="local-search-results"></div><div class="ais-Pagination" id="local-search-pagination" style="display:none;"><ul class="ais-Pagination-list"></ul></div><div id="local-search-stats"></div></div><div id="search-mask"></div><script src="/js/search/local-search.js?v=5.5.4"></script></div></div></body></html>
