简介这份资源面向前端初学者与希望夯实原生 JavaScript 功底的开发者汇集了 500 个可直接运行的网页交互效果实例覆盖 DOM 操作、事件处理、动画过渡、表单验证、AJAX 通信、响应式布局、Canvas 绘图、拖放与本地存储等常见开发场景可作为日常练习与项目参考的代码素材库。压缩包共 516 个文件以 502 个 htm 页面为主体每个页面独立演示一种效果另含少量 gif 图片、xml 配置及 js、htc 等辅助文件整体约 418KB体积轻便、便于按需检索与本地调试。目前已有 267 人学习浏览。读者可通过阅读与修改这些实例理解事件绑定、动画调度与异步请求的实现思路并借鉴其组织方式快速搭建自己的交互页面在动手实践中逐步提升 JavaScript 编程能力。1. 500 个 JavaScript 效果源码一个前端练手与组件抽取的素材库接手一个后台管理项目时产品临时要求加一个“数字滚动到目标值”的动画我翻遍项目里的工具函数也没找到能直接用的实现最后花了大半天从零写了一个带缓动曲线的版本。后来才发现这类零散的交互效果其实早就有大量现成实现只是散落在各处没有形成可检索的素材库。这份 500 个 JavaScript 效果源代码本质上就是这样一个“效果仓库”它把常见的页面交互、动画、DOM 操作、表单增强、视觉特效等场景拆成一个个独立的小例子每个例子都能单独打开、单独运行、单独抠出来改。它适合两类人一是刚学完 JavaScript 语法、想通过大量可运行的小效果建立手感的新手二是需要在项目里快速补一个交互细节、不想从零造轮子的熟手。下面按“这堆源码怎么组织、怎么跑起来、怎么挑着改”的顺序拆一遍。2. 源码组织与运行方式500 个例子是怎么摆的2.1 典型目录结构与文件形态这类效果合集通常不会是一个完整的工程化项目而是一堆按主题分组的静态页面。常见的组织方式是按效果类型分目录每个目录下若干独立的 HTML 文件每个 HTML 文件内联或就近引用自己的 CSS 和 JavaScript。我见过的类似素材包目录层级大致是这样effects/ ├── animation/ # 动画类效果 │ ├── 01-number-roll.html │ ├── 02-fade-in.html │ └── ... ├── dom/ # DOM 操作类 ├── form/ # 表单增强类 ├── canvas/ # Canvas 绘制类 ├── css3/ # CSS3 配合 JS 的视觉特效 └── assets/ ├── js/ # 公共工具函数 └── css/ # 公共样式每个 HTML 文件基本是“一个效果一个文件”的粒度打开就能看到效果关掉互不影响。这种结构的优点是零依赖、零构建缺点是文件多、命名不一定规范需要自己建索引。拿到包之后第一件事不是急着跑而是先列一份文件清单按目录名和文件名判断哪些是自己需要的方向。如果包里有 README 或 index 页面优先从那里入手没有的话用文件管理器按修改时间或名称排序快速扫一遍目录名心里先有个分类地图。2.2 本地跑起来的最小步骤这类纯静态源码不需要 Node 环境也不需要打包工具。最直接的方式是双击 HTML 文件用浏览器打开。但要注意部分效果涉及fetch加载本地 JSON、Canvas 读取图片、或者模块化import直接以file://协议打开会被浏览器的同源策略拦住。稳妥的做法是起一个本地静态服务器# 在源码根目录执行任选一种 python3 -m http.server 8080 # 或者 npx serve .启动后浏览器访问http://localhost:8080从目录列表点进去逐个看效果。用本地服务器还有一个好处控制台报错、网络请求、资源加载路径都能真实反映不会因为协议问题产生假报错。如果某个效果打开是白屏先看控制台有没有 404再看是不是路径写成了绝对路径/assets/...而实际部署在子目录下。2.3 单个效果的代码骨架随便打开一个效果文件结构通常长这样以数字滚动为例!DOCTYPE html html langzh-CN head meta charsetUTF-8 title数字滚动/title style .counter { font-size: 48px; font-weight: bold; } /style /head body div classcounter idcounter0/div script // 目标值与动画时长 const target 12800; const duration 1500; const el document.getElementById(counter); const start performance.now(); function step(now) { // 计算进度0 到 1 const progress Math.min((now - start) / duration, 1); // 缓动先快后慢 const eased 1 - Math.pow(1 - progress, 3); el.textContent Math.floor(eased * target).toLocaleString(); if (progress 1) requestAnimationFrame(step); } requestAnimationFrame(step); /script /body /html这段代码把“效果”压缩到了最小可运行单元一个目标值、一个时长、一个缓动函数、一个requestAnimationFrame循环。参数上target控制最终数字duration控制动画快慢缓动公式1 - Math.pow(1 - progress, 3)决定前段快后段慢的手感。改的时候只需要动这三个地方就能套到自己的页面上。500 个效果基本都是这个套路结构极简、逻辑内联、参数集中在脚本开头方便直接抄。3. 核心效果类型拆解从动画到 DOM 操作的几类实现3.1 动画与缓动requestAnimationFrame 的通用写法动画类效果是这 500 个例子里占比很大的一块核心几乎都绕不开requestAnimationFrame。和setInterval相比它的优势是跟随浏览器刷新节奏、页面切到后台会自动暂停不会在不可见时白白消耗资源。一个合格的动画实现通常包含三要素起始时间戳、进度归一化、缓动函数。上面数字滚动的例子已经展示了这个骨架换一个“元素从左滑入”的效果逻辑完全同构function animateSlide(el, fromX, toX, duration) { const start performance.now(); function frame(now) { const p Math.min((now - start) / duration, 1); // easeOutQuad const eased 1 - (1 - p) * (1 - p); el.style.transform translateX(${fromX (toX - fromX) * eased}px); if (p 1) requestAnimationFrame(frame); } requestAnimationFrame(frame); }参数说明fromX和toX是起止位移duration是毫秒数eased把线性进度转成非线性手感。这类函数可以直接抽成公共工具放到assets/js/下复用。看这类源码时重点不是记住每个效果长什么样而是识别出“进度归一化 缓动 逐帧更新”这个固定模式之后遇到任何位移、缩放、透明度变化都能套同一个骨架。3.2 DOM 操作与事件委托、节流与状态切换DOM 类效果集中在菜单展开收起、标签切换、滚动监听、拖拽排序这些场景。这类代码最容易写歪的地方是事件绑定方式。新手常见写法是给每个列表项单独绑click项目里列表一长就是几百个监听器。更稳的做法是事件委托把监听器挂在父容器上通过event.target判断实际点击项const list document.querySelector(.tab-list); list.addEventListener(click, (e) { const tab e.target.closest(.tab-item); if (!tab) return; // 清除旧激活态 list.querySelectorAll(.tab-item.active) .forEach(n n.classList.remove(active)); tab.classList.add(active); // 根据>const canvas document.getElementById(bg); const ctx canvas.getContext(2d); // 适配高分屏避免模糊 const dpr window.devicePixelRatio || 1; canvas.width innerWidth * dpr; canvas.height innerHeight * dpr; canvas.style.width innerWidth px; canvas.style.height innerHeight px; ctx.scale(dpr, dpr); const particles Array.from({ length: 80 }, () ({ x: Math.random() * innerWidth, y: Math.random() * innerHeight, vx: (Math.random() - 0.5) * 0.6, vy: (Math.random() - 0.5) * 0.6, r: Math.random() * 2 1 })); function draw() { ctx.clearRect(0, 0, innerWidth, innerHeight); for (const p of particles) { p.x p.vx; p.y p.vy; // 边界回弹 if (p.x 0 || p.x innerWidth) p.vx * -1; if (p.y 0 || p.y innerHeight) p.vy * -1; ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill(); } requestAnimationFrame(draw); } draw();关键点在dpr缩放不处理的话高分屏上画布会发虚这是 Canvas 效果最常见的翻车点。粒子数量、速度系数、半径范围都是可调参数改大改小直接影响性能和观感。这类效果抄进项目时务必记得在组件卸载时取消requestAnimationFrame否则页面切走后循环还在跑时间一长就是内存和 CPU 的隐形消耗。4. 避坑与排查跑这批源码时最容易卡住的几件事4.1 现象双击打开白屏控制台报跨域或 404原因通常是资源路径写成了绝对路径或者用了fetch、import加载本地文件file://协议下被浏览器拦截。解决方式是起本地静态服务器并把源码里以/开头的路径改成相对路径或者把整个目录作为服务器根目录。排查时先看 Network 面板哪个请求红了再对照文件实际位置改路径不要盲目改代码逻辑。4.2 现象某个效果在旧浏览器里完全不动这批源码里不少例子用了较新的 API比如IntersectionObserver、Element.closest、可选链?.、structuredClone等。如果目标环境是老版本浏览器或某些内嵌 WebView就会直接报语法错误或方法不存在。解决方式是先确认目标环境支持范围对不支持的 API 做降级closest可以用parentNode循环替代IntersectionObserver可以退回滚动监听加节流。看源码时养成习惯扫一眼用到的 API心里过一遍兼容性。4.3 现象动画效果在低配设备上卡顿掉帧原因多半是逐帧操作了布局属性比如在requestAnimationFrame里改width、top、margin触发反复重排。解决方式是优先改transform和opacity这两个属性走合成层开销小得多。另外检查有没有在循环里反复查询 DOM比如每帧都querySelector应该把元素引用提到循环外缓存起来。粒子类效果还要控制数量80 个和 800 个的帧率差距非常明显。4.4 现象多个效果放同一页面互相干扰单个 HTML 文件跑得好好的把几段代码拼进同一个页面后样式和全局变量开始打架。原因是这批源码大量使用全局变量、通用类名如.box、.item和内联样式。解决方式是抄代码时做命名空间隔离CSS 类名加前缀JS 用 IIFE 或模块包裹避免const重复声明冲突。我一般会先把要用的效果单独跑通再逐段搬进项目每搬一段验证一次而不是一次性全贴进去再调试。4.5 现象定时器和动画在页面切换后仍在运行setInterval和requestAnimationFrame如果没有在适当时机清理页面切走或组件销毁后仍会执行轻则报错“元素不存在”重则持续占用资源。解决方式是在初始化时保存定时器 ID 或帧 ID在卸载逻辑里clearInterval或cancelAnimationFrame。单页应用里尤其要注意把清理逻辑放在组件生命周期钩子里别指望浏览器自动帮你收尾。5. 二次开发与改造把零散效果变成可复用组件5.1 从“一个文件一个效果”到参数化函数这批源码最大的价值不是直接复制粘贴而是作为“实现参考”被改造成参数化函数。以数字滚动为例原始代码把目标值和时长写死在脚本里改造时应该抽成接收配置的函数并返回销毁方法function createCounter(el, { target 0, duration 1500, decimals 0 } {}) { let rafId null; const start performance.now(); function frame(now) { const p Math.min((now - start) / duration, 1); const eased 1 - Math.pow(1 - p, 3); el.textContent (eased * target).toFixed(decimals); if (p 1) rafId requestAnimationFrame(frame); } rafId requestAnimationFrame(frame); // 返回销毁句柄供组件卸载时调用 return () cancelAnimationFrame(rafId); }改造后的函数把目标值、时长、小数位都变成入参调用方按需传值同时拿到一个销毁函数。这样它就能被任意框架包装成组件也不会因为页面切换留下野生的动画循环。500 个效果里凡是带循环、定时器、事件监听的都应该按这个模式补上清理逻辑这是从“素材”走向“可维护代码”的关键一步。5.2 建立自己的效果索引与验收清单500 个文件靠记忆是管不过来的。我的习惯是拿到包之后先建一张表按“效果名 / 目录 / 依赖 API / 是否可直接复用 / 改造点”五列登记只登记自己真正看过的。下面是一个示例片段效果名目录关键 API复用性改造点数字滚动animationrAF高抽参数、加销毁标签切换dom事件委托高类名加前缀粒子背景canvasCanvas 2D中控数量、加销毁拖拽排序dom指针事件中兼容触屏这张表的作用是防止“看过就忘”也方便二次开发时快速定位。验收时我一般走三步单独打开确认效果正常、搬进项目确认无样式冲突、切走页面确认无残留循环。三步都过才算真正可用少一步后面都可能返工。5.3 改造时的取舍哪些效果值得留哪些直接放弃不是所有效果都值得搬进正式项目。判断标准有三条是否依赖过时 API、是否带来明显性能开销、是否与项目设计语言冲突。比如一些纯炫技的鼠标拖尾、全屏粒子放在演示页很抓眼球放进业务后台就是干扰。反过来表单校验提示、加载骨架、轻量过渡动画这类“安静的效果”复用价值反而最高。改造时优先挑那些逻辑独立、参数清晰、不依赖特定 DOM 结构的例子改造成本低出问题也好定位。从那以后我每次拿到这类效果合集都先起本地服务器整体扫一遍再按索引表挑三五个真正要用的单独跑通、单独改造绝不一次性往项目里堆。希望帮到你。本文还有配套的精品资源点击获取