Mo_jon-优快云博客

原创 javascript鼠标hover事件（防抖处理）

本文介绍了一个封装好的hover事件处理函数hoverEvent。该函数实现了防抖处理，可防止快速鼠标移动导致的事件频繁触发。函数接收三个参数：选择器selector、鼠标移入mouseenter和移出mouseleave的回调函数。使用时只需传入对应参数即可，如示例中为".hover-el"元素绑定hover事件。该封装简化了hover事件处理，并内置了100ms的防抖延迟，提升了交互体验。

2025-10-13 10:26:41 190

原创 iframe 全屏切换函数 Javascript 实现

这个代码片段实现了一个全屏切换功能。toggleFullScreen函数检查当前是否处于全屏状态，如果不是则让指定元素进入全屏模式，否则退出全屏。它兼容多种浏览器前缀（webkit、moz、ms）。示例中展示了如何调用该函数使一个iframe元素切换全屏状态。该函数提供了跨浏览器的全屏API统一封装，便于在网页中实现全屏功能。

2025-10-09 17:52:33 142

原创用 javascript 实现一个通用分页构造器 “createPaginator“ ，内部自动维护 page 参数

本文介绍了如何实现一个通用的分页构造器createPaginator，并演示了其在分页加载场景中的应用。该构造器支持配置初始页码、前后置钩子函数和分页处理逻辑，通过next()方法控制分页状态。在示例中，结合scrollToBottom实现了滚动到底部自动加载更多数据的功能，同时处理了加载状态显示和数据请求逻辑。代码包含防抖机制、滚动兼容性处理和内存泄漏预防等细节，为前端分页功能提供了可复用的解决方案。

2025-09-23 15:31:42 812

原创 css 遮盖滚动条，鼠标移上显示

该HTML文档展示了一种使用CSS隐藏横向滚动条的技巧。通过::after伪元素和绝对定位，在PC端（宽度≥768px时）创建一个20px高的白色遮罩层覆盖滚动条区域。当鼠标悬停时遮罩消失，滚动条可见。这种方法保持了内容可横向滚动功能，同时实现了视觉上隐藏滚动条的UI效果。核心代码包括overflow-x-scroll类实现滚动，cover-scrollbar-x类实现遮盖逻辑，利用:has()选择器和hover状态控制遮罩显隐。

2025-09-05 16:45:14 377

原创 CSS 瀑布流图片简易实现

本文介绍了四种实现瀑布流布局的CSS方法：1) 使用float:left实现固定高度的常规浮动布局；2) 使用flex-wrap:wrap实现固定高度的弹性盒子布局；3) 使用column-count实现列数固定、宽高自适应的多列布局；4) 使用Grid布局结合grid-auto-flow:dense实现列数变化、宽高自适应的网格布局。每种方法都提供了对应的HTML结构和CSS样式代码示例，适用于不同需求场景下的瀑布流实现。

2025-09-04 16:20:11 1063

原创 Promise 极简实现，执行 resolve 就是执行了 then 传入的 callback

文章摘要：本文展示了一个简化版的 Promise 实现代码，核心逻辑包括构造函数、then 方法和 resolve 功能。通过 setTimeout 演示了异步操作如何触发 resolve，进而执行 then 方法中注册的回调函数。代码示例清晰地展现了 Promise 的基本工作机制：resolve 实际上就是执行 then 传入的回调函数。

2025-08-20 12:08:59 239

原创 Chrome 浏览使用 SwitchyOmega 扩展插件，替代 host 文件配置功能（以代理方式实现）

本文介绍了SwitchyOmega代理插件的安装与配置方法。首先通过图片展示插件安装界面，然后分两步详细说明配置过程：1）创建代理设置；2）建立自定义规则。最后指导用户如何启用配置好的规则。全文配有清晰的界面截图，帮助用户直观了解每个操作步骤。

2025-08-16 10:07:19 377

原创 js 实现洋葱模型、洋葱反向模型

摘要本文通过JavaScript代码演示了两种中间件执行模式：正向链式调用和洋葱模型。第一种模式展示了函数按顺序调用但执行顺序反转的现象；第二种模式则实现了经典的洋葱模型，中间件按嵌套顺序依次执行，再逆序返回。代码示例清晰地展示了两种模式下函数调用的执行顺序差异，并通过控制台输出直观呈现了执行过程。文中配图展示了两种模式的具体执行结果，帮助理解中间件处理流程的特点。

2025-08-08 18:30:25 261

原创 JQuery 禁止页面滚动（防止页面抖动）

这段JavaScript代码提供了两个函数，用于控制页面的滚动行为。unScroll函数通过设置body元素的宽度和overflow-y属性为hidden，禁止页面上下滚动。reUnScroll函数则通过将overflow-y属性恢复为auto并移除宽度设置，重新启用页面滚动。这两个函数可以用于在特定场景下（如弹出层显示时）临时禁用页面滚动，以提升用户体验。

2025-05-19 17:16:54 261