简介这是一份面向前端初学者与进阶练习者的仿京东数码页面实战资源围绕HTML、CSS与JavaScript三项核心技术演示如何搭建具备商品展示、导航、搜索框与购物车等模块的动态电商页面。项目重点覆盖Flexbox或Grid布局、CSS伪类悬停与滑动动画、DOM操作与事件处理并涉及响应式媒体查询与基础性能优化思路适合用来练习页面结构搭建、样式还原与交互逻辑编写。压缩包共20个文件包含2个html页面、1个css样式表以及10张jpg和7张png图片素材整体约503KB图片主要用于商品图、横幅与图标等视觉元素结构轻量便于本地直接运行调试。目前已有134人学习下载。通过完整源码与素材读者可对照实现商品列表排列、轮播与下拉菜单等效果理解HTML结构、CSS布局与JavaScript交互之间的配合方式并在此基础上自行扩展购物车、滚动加载等模块积累可复用的前端项目经验。1. 仿京东数码首页拆解纯 CSSHTMLJavaScript 能还原到什么程度打开京东数码频道第一屏最抓人的不是商品图而是那层会呼吸的动效轮播图切换时图片带着缩放位移滑入鼠标扫过商品卡时卡片轻微上浮、阴影加深侧边分类菜单展开时高度是平滑撑开的而不是硬切。很多人第一反应是「这肯定用了框架」其实把这类动态网页效果拆开看核心就是 CSS 的 transition、transform、animation 三件套加上 JavaScript 负责状态切换和定时器调度纯 HTMLCSSJavaScript 完全能复现八成以上的视觉交互。这篇笔记面向的是想用原生三件套做出电商级动态首页的前端从业者和学生我会把轮播、卡片悬停、分类展开、涟漪光圈扩散这几个高频效果从选型理由讲到可抄的代码再讲清楚哪些地方容易翻车。适合已经会写基础 HTML 标签、能看懂 CSS 选择器、JavaScript 会操作 DOM 的人跟着做新手照着步骤能跑通熟手能直接拿去改参数。2. 轮播图与卡片悬停动态效果的两块地基2.1 为什么轮播不用 JS 逐帧改样式轮播是数码首页最核心的动态效果也是新手最容易写崩的地方。常见翻车写法是用setInterval每隔几十毫秒去改left或margin-left靠数值累加实现滑动。这种写法在低端机上会掉帧因为left属于布局属性每次改动都会触发重排reflow浏览器要重新计算整个文档的几何信息。正确做法是把位移交给 CSS 的transform: translateX()它只触发合成composite不碰布局和绘制GPU 直接接管。我一般把轮播拆成三层外层.carousel做视口并设overflow: hidden内层.track是一条横向排列所有图片的轨道用display: flex让图片并排。切换时只改.track的transform配合transition就有平滑滑动。div classcarousel div classtrack idtrack img srcbanner1.jpg alt数码主推 img srcbanner2.jpg alt新品首发 img srcbanner3.jpg alt配件专场 /div button classprev idprev‹/button button classnext idnext›/button /div.carousel { position: relative; width: 100%; height: 400px; overflow: hidden; } .track { display: flex; height: 100%; /* 关键位移用 transform过渡交给浏览器合成层 */ transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); } .track img { width: 100%; height: 100%; object-fit: cover; flex-shrink: 0; }const track document.getElementById(track); const total track.children.length; let index 0; function goTo(i) { // 取模保证循环负数也能正确回绕 index (i total) % total; track.style.transform translateX(-${index * 100}%); } document.getElementById(next).onclick () goTo(index 1); document.getElementById(prev).onclick () goTo(index - 1); // 自动播放鼠标移入暂停 let timer setInterval(() goTo(index 1), 3000); track.parentElement.onmouseenter () clearInterval(timer); track.parentElement.onmouseleave () { timer setInterval(() goTo(index 1), 3000); };逻辑说明goTo里用(i total) % total处理边界避免点上一张到第一张时出现负数索引。位移量用百分比-${index * 100}%因为每张图宽度是容器的 100%这样不用关心具体像素值响应式下也不会错位。参数上transition的时长 0.5s 是电商轮播的舒适区间低于 0.3s 显得急高于 0.8s 用户会觉得拖沓缓动函数用cubic-bezier(0.25, 0.8, 0.25, 1)比默认ease更有「滑入后轻微减速」的高级感。自动播放间隔 3000ms 是常见值数码类目信息密度高可以放到 4000ms 给用户更多阅读时间。2.2 卡片悬停上浮transform 与 box-shadow 的配合商品卡悬停是第二个高频动态效果。京东数码的卡片鼠标移上去会轻微上浮、阴影扩散这个效果纯 CSS 就能做不需要 JavaScript。核心是:hover状态下改transform: translateY(-6px)和box-shadow。.card { width: 220px; background: #fff; border-radius: 8px; padding: 12px; /* 过渡写在默认态移入移出都平滑 */ transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); } .card img { width: 100%; border-radius: 6px; transition: transform 0.4s ease; } .card:hover img { transform: scale(1.05); }这里有个血泪经验transition一定要写在默认态而不是:hover里。写在:hover里的话鼠标移出时过渡会瞬间消失卡片「啪」地弹回去非常生硬。写在默认态移入移出都走同一套过渡。另外translateY的位移量别贪大6px 到 10px 是安全范围超过 15px 卡片会显得飘。图片的scale(1.05)要配合父容器的overflow: hidden否则放大后会溢出卡片边界。3. 分类菜单展开与涟漪光圈把交互细节做扎实3.1 侧边分类菜单的高度过渡为什么不能直接改 height数码首页左侧通常有一列分类菜单鼠标移上去展开子分类。新手第一反应是height: 0到height: auto加过渡结果发现过渡不生效——因为auto不是具体数值浏览器无法在两个非数值之间插值。这是 CSS 过渡里最经典的坑之一。常见做法有三种。第一种是给一个足够大的固定高度比如max-height: 500px过渡max-height。缺点是如果内容只有 100px 高展开动画会有一段「空跑」的延迟感。第二种是用grid-template-rows: 0fr到1fr过渡这是较新的方案兼容性已经不错。第三种是 JavaScript 测量scrollHeight后写死像素值再过渡最精确但代码多。我一般用max-height方案因为分类菜单内容高度相对固定把max-height设成实际内容高度的 1.5 倍左右延迟感可以接受。.submenu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .menu-item:hover .submenu { max-height: 320px; }参数说明max-height的过渡时长 0.35s 比卡片悬停略长因为菜单展开是「信息呈现」动作稍慢一点让用户看清。overflow: hidden必须加否则收起状态下子项还会露出来。如果子菜单里有绝对定位的下拉箭头注意overflow: hidden会把它裁掉这种情况要把箭头放到外层容器。3.2 涟漪光圈扩散用 animation 做点击反馈「css涟漪光圈扩散」是近期搜索量很高的效果本质是点击按钮时从点击位置扩散出一圈逐渐放大、淡出的光圈。这个效果用纯 CSS 的keyframes配合 JavaScript 动态创建元素实现。.ripple-btn { position: relative; overflow: hidden; padding: 12px 32px; background: #e1251b; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.6); transform: scale(0); animation: ripple-spread 0.6s ease-out; pointer-events: none; } keyframes ripple-spread { to { transform: scale(4); opacity: 0; } }document.querySelectorAll(.ripple-btn).forEach(btn { btn.addEventListener(click, e { const rect btn.getBoundingClientRect(); const size Math.max(rect.width, rect.height); const span document.createElement(span); span.className ripple; // 让光圈从鼠标点击位置开始扩散 span.style.width span.style.height size px; span.style.left (e.clientX - rect.left - size / 2) px; span.style.top (e.clientY - rect.top - size / 2) px; btn.appendChild(span); // 动画结束后移除避免 DOM 堆积 span.addEventListener(animationend, () span.remove()); }); });逻辑说明getBoundingClientRect拿到按钮相对视口的位置e.clientX - rect.left算出点击点在按钮内部的坐标。光圈直径取按钮宽高的较大值保证能覆盖整个按钮。scale(4)是放大倍数配合opacity: 0形成扩散淡出。pointer-events: none让光圈不拦截后续点击。最关键的是animationend里移除元素否则每点一次就多一个 DOM 节点点几十次后页面会卡。参数上0.6s 的动画时长是点击反馈的舒适值低于 0.4s 看不清扩散过程高于 0.8s 用户会觉得响应迟钝。4. 避坑与排查动态效果做不出来时先看这几条4.1 过渡完全不生效现象写了transition但元素状态切换时是硬切没有任何动画。原因通常是过渡属性写在了:hover里而不是默认态或者过渡的属性名拼错比如把transform写成transfrom。解决把transition移到默认态用浏览器开发者工具的 Computed 面板检查过渡属性是否被识别。还有一种情况是元素初始display: nonedisplay不支持过渡要先改成visibility或opacity配合。4.2 transform 冲突导致动画错乱现象一个元素同时要位移和旋转写了两个transform结果只有一个生效。原因transform是复合属性后写的会覆盖先写的。解决把多个变换合并到一条声明里比如transform: translateY(-6px) rotate(3deg)顺序会影响结果先位移后旋转和先旋转后位移视觉上不同按需调整。4.3 轮播切换时图片闪烁现象轮播滑动过程中图片边缘出现白线或闪烁。原因translateX用百分比时浏览器在亚像素渲染上会有舍入误差图片之间出现缝隙。解决给.track加will-change: transform提前提升合成层或者给每张图加transform: translateZ(0)强制开启 GPU 加速。另外图片之间不要留margin用flex-shrink: 0保证不被压缩。4.4 移动端 hover 效果卡住现象手机上点一下卡片悬停效果一直不消失要再点别处才恢复。原因移动端没有真正的 hover触摸会触发:hover状态并保持。解决用媒体查询把 hover 效果限制在支持悬停的设备上media (hover: hover) { .card:hover { ... } }触摸设备改用:active做点击反馈。4.5 动画多了页面滚动卡顿现象首页同时有轮播、多个卡片悬停、涟漪效果滚动时明显掉帧。原因过多元素同时触发重绘或者动画属性选错用了top、left而非transform。解决优先用transform和opacity做动画这两个属性只走合成给频繁动画的元素加will-change但要节制加太多反而占内存轮播自动播放时如果页面不可见用document.hidden判断并暂停定时器。5. 进阶技巧用 CSS 变量统一管理动效参数做到后面你会发现轮播时长、卡片位移量、涟漪扩散倍数这些参数散落在各处改一个风格要翻遍整个文件。我一般会在:root里定义一组 CSS 变量把所有动效参数集中管理。:root { --duration-fast: 0.3s; --duration-base: 0.5s; --duration-slow: 0.6s; --ease-out: cubic-bezier(0.25, 0.8, 0.25, 1); --card-lift: -6px; --ripple-scale: 4; } .card { transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .card:hover { transform: translateY(var(--card-lift)); }这样调整整体动效节奏时只改:root一处。参数命名上我习惯按「时长档位 缓动 具体数值」分类fast/base/slow三档覆盖大部分场景避免出现duration-1、duration-2这种看不出用途的名字。验证动效是否达标我有个笨办法但很管用打开 Chrome 开发者工具的 Performance 面板录一段操作看 FPS 曲线。稳定在 60 帧说明合成层工作正常如果出现红色长条说明有重排或重绘。另一个办法是在 Rendering 面板勾选「Paint flashing」动画元素如果大面积闪绿说明重绘范围过大要检查是不是动了布局属性。还有个容易忽略的点prefers-reduced-motion。部分用户系统里开了「减少动态效果」这时候应该把动画时长压到接近 0。加一段媒体查询就能兼顾。media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }最后说个我踩过的坑早期做轮播时用setInterval没做清理页面切换路由后定时器还在跑内存一路涨。后来养成习惯凡是setInterval和addEventListener都配对写清理逻辑组件销毁时clearInterval和removeEventListener一个不落。动态效果做得再炫内存泄漏一样让页面越用越卡。希望帮到你。本文还有配套的精品资源点击获取
简介这是一份面向前端初学者与进阶练习者的仿京东数码页面实战资源围绕HTML、CSS与JavaScript三项核心技术演示如何搭建具备商品展示、导航、搜索框与购物车等模块的动态电商页面。项目重点覆盖Flexbox或Grid布局、CSS伪类悬停与滑动动画、DOM操作与事件处理并涉及响应式媒体查询与基础性能优化思路适合用来练习页面结构搭建、样式还原与交互逻辑编写。压缩包共20个文件包含2个html页面、1个css样式表以及10张jpg和7张png图片素材整体约503KB图片主要用于商品图、横幅与图标等视觉元素结构轻量便于本地直接运行调试。目前已有134人学习下载。通过完整源码与素材读者可对照实现商品列表排列、轮播与下拉菜单等效果理解HTML结构、CSS布局与JavaScript交互之间的配合方式并在此基础上自行扩展购物车、滚动加载等模块积累可复用的前端项目经验。1. 仿京东数码首页拆解纯 CSSHTMLJavaScript 能还原到什么程度打开京东数码频道第一屏最抓人的不是商品图而是那层会呼吸的动效轮播图切换时图片带着缩放位移滑入鼠标扫过商品卡时卡片轻微上浮、阴影加深侧边分类菜单展开时高度是平滑撑开的而不是硬切。很多人第一反应是「这肯定用了框架」其实把这类动态网页效果拆开看核心就是 CSS 的 transition、transform、animation 三件套加上 JavaScript 负责状态切换和定时器调度纯 HTMLCSSJavaScript 完全能复现八成以上的视觉交互。这篇笔记面向的是想用原生三件套做出电商级动态首页的前端从业者和学生我会把轮播、卡片悬停、分类展开、涟漪光圈扩散这几个高频效果从选型理由讲到可抄的代码再讲清楚哪些地方容易翻车。适合已经会写基础 HTML 标签、能看懂 CSS 选择器、JavaScript 会操作 DOM 的人跟着做新手照着步骤能跑通熟手能直接拿去改参数。2. 轮播图与卡片悬停动态效果的两块地基2.1 为什么轮播不用 JS 逐帧改样式轮播是数码首页最核心的动态效果也是新手最容易写崩的地方。常见翻车写法是用setInterval每隔几十毫秒去改left或margin-left靠数值累加实现滑动。这种写法在低端机上会掉帧因为left属于布局属性每次改动都会触发重排reflow浏览器要重新计算整个文档的几何信息。正确做法是把位移交给 CSS 的transform: translateX()它只触发合成composite不碰布局和绘制GPU 直接接管。我一般把轮播拆成三层外层.carousel做视口并设overflow: hidden内层.track是一条横向排列所有图片的轨道用display: flex让图片并排。切换时只改.track的transform配合transition就有平滑滑动。div classcarousel div classtrack idtrack img srcbanner1.jpg alt数码主推 img srcbanner2.jpg alt新品首发 img srcbanner3.jpg alt配件专场 /div button classprev idprev‹/button button classnext idnext›/button /div.carousel { position: relative; width: 100%; height: 400px; overflow: hidden; } .track { display: flex; height: 100%; /* 关键位移用 transform过渡交给浏览器合成层 */ transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); } .track img { width: 100%; height: 100%; object-fit: cover; flex-shrink: 0; }const track document.getElementById(track); const total track.children.length; let index 0; function goTo(i) { // 取模保证循环负数也能正确回绕 index (i total) % total; track.style.transform translateX(-${index * 100}%); } document.getElementById(next).onclick () goTo(index 1); document.getElementById(prev).onclick () goTo(index - 1); // 自动播放鼠标移入暂停 let timer setInterval(() goTo(index 1), 3000); track.parentElement.onmouseenter () clearInterval(timer); track.parentElement.onmouseleave () { timer setInterval(() goTo(index 1), 3000); };逻辑说明goTo里用(i total) % total处理边界避免点上一张到第一张时出现负数索引。位移量用百分比-${index * 100}%因为每张图宽度是容器的 100%这样不用关心具体像素值响应式下也不会错位。参数上transition的时长 0.5s 是电商轮播的舒适区间低于 0.3s 显得急高于 0.8s 用户会觉得拖沓缓动函数用cubic-bezier(0.25, 0.8, 0.25, 1)比默认ease更有「滑入后轻微减速」的高级感。自动播放间隔 3000ms 是常见值数码类目信息密度高可以放到 4000ms 给用户更多阅读时间。2.2 卡片悬停上浮transform 与 box-shadow 的配合商品卡悬停是第二个高频动态效果。京东数码的卡片鼠标移上去会轻微上浮、阴影扩散这个效果纯 CSS 就能做不需要 JavaScript。核心是:hover状态下改transform: translateY(-6px)和box-shadow。.card { width: 220px; background: #fff; border-radius: 8px; padding: 12px; /* 过渡写在默认态移入移出都平滑 */ transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); } .card img { width: 100%; border-radius: 6px; transition: transform 0.4s ease; } .card:hover img { transform: scale(1.05); }这里有个血泪经验transition一定要写在默认态而不是:hover里。写在:hover里的话鼠标移出时过渡会瞬间消失卡片「啪」地弹回去非常生硬。写在默认态移入移出都走同一套过渡。另外translateY的位移量别贪大6px 到 10px 是安全范围超过 15px 卡片会显得飘。图片的scale(1.05)要配合父容器的overflow: hidden否则放大后会溢出卡片边界。3. 分类菜单展开与涟漪光圈把交互细节做扎实3.1 侧边分类菜单的高度过渡为什么不能直接改 height数码首页左侧通常有一列分类菜单鼠标移上去展开子分类。新手第一反应是height: 0到height: auto加过渡结果发现过渡不生效——因为auto不是具体数值浏览器无法在两个非数值之间插值。这是 CSS 过渡里最经典的坑之一。常见做法有三种。第一种是给一个足够大的固定高度比如max-height: 500px过渡max-height。缺点是如果内容只有 100px 高展开动画会有一段「空跑」的延迟感。第二种是用grid-template-rows: 0fr到1fr过渡这是较新的方案兼容性已经不错。第三种是 JavaScript 测量scrollHeight后写死像素值再过渡最精确但代码多。我一般用max-height方案因为分类菜单内容高度相对固定把max-height设成实际内容高度的 1.5 倍左右延迟感可以接受。.submenu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .menu-item:hover .submenu { max-height: 320px; }参数说明max-height的过渡时长 0.35s 比卡片悬停略长因为菜单展开是「信息呈现」动作稍慢一点让用户看清。overflow: hidden必须加否则收起状态下子项还会露出来。如果子菜单里有绝对定位的下拉箭头注意overflow: hidden会把它裁掉这种情况要把箭头放到外层容器。3.2 涟漪光圈扩散用 animation 做点击反馈「css涟漪光圈扩散」是近期搜索量很高的效果本质是点击按钮时从点击位置扩散出一圈逐渐放大、淡出的光圈。这个效果用纯 CSS 的keyframes配合 JavaScript 动态创建元素实现。.ripple-btn { position: relative; overflow: hidden; padding: 12px 32px; background: #e1251b; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.6); transform: scale(0); animation: ripple-spread 0.6s ease-out; pointer-events: none; } keyframes ripple-spread { to { transform: scale(4); opacity: 0; } }document.querySelectorAll(.ripple-btn).forEach(btn { btn.addEventListener(click, e { const rect btn.getBoundingClientRect(); const size Math.max(rect.width, rect.height); const span document.createElement(span); span.className ripple; // 让光圈从鼠标点击位置开始扩散 span.style.width span.style.height size px; span.style.left (e.clientX - rect.left - size / 2) px; span.style.top (e.clientY - rect.top - size / 2) px; btn.appendChild(span); // 动画结束后移除避免 DOM 堆积 span.addEventListener(animationend, () span.remove()); }); });逻辑说明getBoundingClientRect拿到按钮相对视口的位置e.clientX - rect.left算出点击点在按钮内部的坐标。光圈直径取按钮宽高的较大值保证能覆盖整个按钮。scale(4)是放大倍数配合opacity: 0形成扩散淡出。pointer-events: none让光圈不拦截后续点击。最关键的是animationend里移除元素否则每点一次就多一个 DOM 节点点几十次后页面会卡。参数上0.6s 的动画时长是点击反馈的舒适值低于 0.4s 看不清扩散过程高于 0.8s 用户会觉得响应迟钝。4. 避坑与排查动态效果做不出来时先看这几条4.1 过渡完全不生效现象写了transition但元素状态切换时是硬切没有任何动画。原因通常是过渡属性写在了:hover里而不是默认态或者过渡的属性名拼错比如把transform写成transfrom。解决把transition移到默认态用浏览器开发者工具的 Computed 面板检查过渡属性是否被识别。还有一种情况是元素初始display: nonedisplay不支持过渡要先改成visibility或opacity配合。4.2 transform 冲突导致动画错乱现象一个元素同时要位移和旋转写了两个transform结果只有一个生效。原因transform是复合属性后写的会覆盖先写的。解决把多个变换合并到一条声明里比如transform: translateY(-6px) rotate(3deg)顺序会影响结果先位移后旋转和先旋转后位移视觉上不同按需调整。4.3 轮播切换时图片闪烁现象轮播滑动过程中图片边缘出现白线或闪烁。原因translateX用百分比时浏览器在亚像素渲染上会有舍入误差图片之间出现缝隙。解决给.track加will-change: transform提前提升合成层或者给每张图加transform: translateZ(0)强制开启 GPU 加速。另外图片之间不要留margin用flex-shrink: 0保证不被压缩。4.4 移动端 hover 效果卡住现象手机上点一下卡片悬停效果一直不消失要再点别处才恢复。原因移动端没有真正的 hover触摸会触发:hover状态并保持。解决用媒体查询把 hover 效果限制在支持悬停的设备上media (hover: hover) { .card:hover { ... } }触摸设备改用:active做点击反馈。4.5 动画多了页面滚动卡顿现象首页同时有轮播、多个卡片悬停、涟漪效果滚动时明显掉帧。原因过多元素同时触发重绘或者动画属性选错用了top、left而非transform。解决优先用transform和opacity做动画这两个属性只走合成给频繁动画的元素加will-change但要节制加太多反而占内存轮播自动播放时如果页面不可见用document.hidden判断并暂停定时器。5. 进阶技巧用 CSS 变量统一管理动效参数做到后面你会发现轮播时长、卡片位移量、涟漪扩散倍数这些参数散落在各处改一个风格要翻遍整个文件。我一般会在:root里定义一组 CSS 变量把所有动效参数集中管理。:root { --duration-fast: 0.3s; --duration-base: 0.5s; --duration-slow: 0.6s; --ease-out: cubic-bezier(0.25, 0.8, 0.25, 1); --card-lift: -6px; --ripple-scale: 4; } .card { transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .card:hover { transform: translateY(var(--card-lift)); }这样调整整体动效节奏时只改:root一处。参数命名上我习惯按「时长档位 缓动 具体数值」分类fast/base/slow三档覆盖大部分场景避免出现duration-1、duration-2这种看不出用途的名字。验证动效是否达标我有个笨办法但很管用打开 Chrome 开发者工具的 Performance 面板录一段操作看 FPS 曲线。稳定在 60 帧说明合成层工作正常如果出现红色长条说明有重排或重绘。另一个办法是在 Rendering 面板勾选「Paint flashing」动画元素如果大面积闪绿说明重绘范围过大要检查是不是动了布局属性。还有个容易忽略的点prefers-reduced-motion。部分用户系统里开了「减少动态效果」这时候应该把动画时长压到接近 0。加一段媒体查询就能兼顾。media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }最后说个我踩过的坑早期做轮播时用setInterval没做清理页面切换路由后定时器还在跑内存一路涨。后来养成习惯凡是setInterval和addEventListener都配对写清理逻辑组件销毁时clearInterval和removeEventListener一个不落。动态效果做得再炫内存泄漏一样让页面越用越卡。希望帮到你。本文还有配套的精品资源点击获取
