简介一套仿京东数码网页的纯前端源码基于HTML、CSS与JavaScript构建完整呈现电商页面常见的导航、横幅、商品陈列与动态交互适合前端初学者模仿练习也可作为电商风格页面的参考模板。压缩包共20个文件、约503KB内含2个HTML页面、1个CSS样式文件以及17张jpg/png图片素材主要用作商品图、背景图和图标等。已有134人学习下载资源内图片素材分类放置目录结构清晰。通过打开两个HTML文件即可直接查看动态效果对照源码可深入理解CSS布局、Flex/Grid排列以及JavaScript事件处理、轮播等常见交互实现是练习纯前端页面开发的实用素材。1. 仿京东页面真正要先定的是交互清单一个电商页面看起来复杂其实拆开就两类事结构怎么排、交互怎么动。而仿京东数码这种页面最花时间的往往不是 html 和 CSS 的骨架而是鼠标移入、滚动、轮播、切换这一串动态效果怎么用原生三件套还原出来。很多开发者第一反应是找组件库但纯 CSS HTML JavaScript 反而能把页面做得很轻也能把每个动效的触发条件、参数和边界都握在自己手里。这篇内容适合两类人一类是刚能把页面画出来、想补齐交互细节的前端另一类是需要用原生技术写活动页、专题页的工程师。先列交互清单再逐段落地后面的代码都是在为清单里的动作兜底。2. 布局与卡片栅格、优惠券锯齿、两行超出省略几乎所有电商页面都长在同一套骨架上顶部搜索栏、商品导航、轮播焦点图、商品流。模拟京东数码频道时不需要把整站搬下来重点是先把商品卡片的布局规则定清楚因为商品卡片是动态效果的主要载体轮播、筛选、hover 反馈都在它上面发生。2.1 栅格骨架与区块划分常见的做法是先定一个版心宽度然后把商品列表做成响应式栅格。京东的版心在 PC 端是 1190px我一般会用max-width: 1190px; margin: 0 auto;来做容器既不写死宽度也不会在大屏下拉伸得失去控制。列表区的栅格用 CSS Grid 最省事因为gap属性直接管理卡片间距不需要给每个子项写margin。div classcontainer ul classproduct-grid idproduct-list !-- 商品卡片由 JavaScript 渲染 -- /ul /div.container { max-width: 1190px; margin: 0 auto; padding: 0 12px; } .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; padding: 0; } media (max-width: 768px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }repeat(4, 1fr)表示每一行放 4 列每一列等分剩余宽度。1fr是 Grid 里的比例单位卡片宽度会随容器伸缩不会出现一列被内容撑破、其他列收缩的情况。媒体查询里改成repeat(2, 1fr)是为了在窄屏下避免卡片过窄被迫内部换行属于移动端最先要考虑的一个降级策略。2.2 商品卡片的三个 CSS 关键点内边距、价格、两行省略商品卡片看起来简单但经常返工的是三处图片与文字的内边距、价格与原价的层级关系、标题超出一行或两行后的截断方式。先看一个最小可用的卡片结构li classproduct-card a href# div classthumb img srcimg/headphone.jpg alt无线降噪耳机 span classtag热卖/span /div div classinfo h3无线降噪耳机 主动降噪 蓝牙5.4 长续航/h3 div classprice-row b classprice399/b !-- css 删除线的典型场景原价 -- s classold-price599/s /div /div /a /li.product-card { background: #fff; border-radius: 8px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .product-card .thumb { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #f5f5f5; } .thumb img { width: 100%; height: 100%; object-fit: cover; } .product-card .info { padding: 12px 14px 16px; } .product-card h3 { font-size: 14px; line-height: 1.5; color: #333; /* 两行超出省略由下面三行组成 */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; } .price { color: #e1251b; font-size: 18px; font-weight: 700; } .old-price { color: #999; font-size: 13px; text-decoration: line-through; }aspect-ratio: 1 / 1能保证图片区域始终是正方形配合object-fit: cover图片裁切后不会变形。这里要注意浏览器兼容性已经不是问题但老的移动 WebView 里有时还要img { display: block; }来消掉行内元素底部产生的间隙这个细节很容易被忽略。两行超出省略是三行模式的 css 文件里很实用的东西display: -webkit-box声明为弹性盒子-webkit-line-clamp控制显示行数-webkit-box-orient指定主轴方向最后overflow: hidden。这一组不能拆少一行都可能在某些浏览器里失效尤其是box-orient很多缩写工具会把它丢掉。2.3 促销标签与优惠券锯齿的圆切实现促销标签和优惠券是数码频道里最常见的视觉元素。标签好做一个绝对定位的span加背景色就行难点是优惠券左右两侧的半圆缺口也就是热词里常说的 css 优惠券圆切。最简单的方案是用伪元素加圆形背景让圆点盖在卡片边缘形成视觉上的“打孔”效果。.coupon { position: relative; display: inline-block; padding: 6px 24px; border: 1px dashed #e1251b; color: #e1251b; font-size: 13px; } .coupon::before, .coupon::after { content: ; position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #f5f5f5; transform: translateY(-50%); } .coupon::before { left: -6px; } .coupon::after { right: -6px; }伪元素的圆形背景必须和页面背景一致而不是白色否则圆切位置会露出白点。这里用#f5f5f5是因为所在区块背景就是浅灰。如果页面背景是渐变或图片这个方法就不好用了更严谨的做法是用clip-path直接裁切出锯齿但clip-path画的锯齿边缘不平滑而且对边框虚线支持不自然。实现方式代码量锯齿圆滑度适用场景伪元素圆形遮盖8-10 行高纯色背景clip-path 锯齿5-8 行边缘生硬无边框、纯色背景SVG 背景图需要单独文件高需要多色、渐变背景促销标签我建议用position: absolute挂在图片左上角标签宽度不固定用left: 8px; top: 8px; padding: 2px 8px;控制位置和尺寸不要用固定宽度避免文案变长后溢出。3. 纯 CSS 动效鼠标移入、字体渐变与打点加载栅格搭好、卡片有了静态样子后下一步是把“动”的部分交给 CSS 处理。电商页的动态效果有相当大比例是纯 CSS 能完成的而且比 JavaScript 驱动更顺滑因为过渡和动画跑在合成器线程上不需要频繁改 DOM 属性。这一章重点拆三个场景鼠标移入反馈、价格字体渐变、打点 loading。3.1 用 hover 和 transition 还原鼠标移入事件京东数码卡片最常见的反馈是“上浮 阴影加深 图片轻微放大”。鼠标移入事件在这里不需要 JavaScript 监听CSS 的:hover配合transition就可以完整覆盖。注意一个原则不要在 hover 状态下直接改width、height、top这些会触发布局重排的属性优先改transform和box-shadow。.product-card { transition: transform .25s ease, box-shadow .25s ease; } .product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, .08); } .thumb img { transition: transform .4s cubic-bezier(.25, .8, .25, 1); } .product-card:hover .thumb img { transform: scale(1.06); }transition的拆分写法把transform和box-shadow分开声明这样两个属性的变化时长和曲线可以独立控制。图片放大用的是.product-card:hover .thumb img后代选择器因为放大的 flash 效果只作用于图片但触发的热区是整个卡片。cubic-bezier曲线比默认的ease更柔和前慢后快松手时不突兀。这里有一个容易犯的错transition写在了:hover里面导致鼠标移出时动画瞬间消失。正确做法是把transition写在默认状态上让移入和移出都平滑过渡。3.2 价格区的字体渐变和红黑层级价格是数码频道视觉重点京东常用红色渐变来强调数字但渐变方向、饱和度都要克制否则整屏数字都在发光会显得很吵。css 字体渐变的原理是先用background渲染渐变再用background-clip: text把背景裁剪到文字形状最后把文字颜色设为透明。.price { background: linear-gradient(180deg, #e1251b 0%, #ff6a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 20px; font-weight: 700; }要留意-webkit-background-clip: text的前缀虽然现代浏览器普遍支持无前缀写法但为了保险两个都要写。透明文字如果遇到不支持background-clip: text的浏览器会变成不可见所以这种效果只适合用在有降级方案的位置上。实战中我通常把数字拆成“梯梯”结构整数部分用大字号红色小数部分用小字号灰色让价格看起来更专业。3.3 用 steps 做打点 loading 动画商品列表在请求数据等待、图片懒加载时经常会用到打点动画“加载中”后面跟着三个点依次出现。css 打点不复杂核心是用steps()做一个步进动画把宽度从 0 撑到 3em通过overflow: hidden截断文字模拟出点逐个出现的效果。p classloading加载中span/span/p.loading span { display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; animation: dotting 1.2s steps(3, end) infinite; } keyframes dotting { 0% { width: 0; } 100% { width: 3em; } }steps(3, end)表示整个动画分成 3 次跳跃完成end参数让每一跳在动画时间段末尾生效这样点不是连续滑出来的而是按“加载中”“加载中.”“加载中..”“加载中...”的节奏递进。width从 0 到 3em每跳增加 1em正好一个点宽。这个方案不需要操作 content也不依赖任何框架对中文排版友好。4. JavaScript 动态化渲染、轮播与事件委托纯 CSS 解决的是“静态页面上的动态感”但商品列表的渲染、焦点图的切换、Tab 筛选这些真正的数据变化还是要交给 JavaScript。这一章用的都是基础语法不引入框架和构建工具打开 html 文件就能跑通。4.1 用数组加模板字符串渲染商品列表商品卡片不要一条条写在 HTML 里而是把数据放到数组里再用模板字符串批量生成。这样后续接入接口、做筛选和排序都直接操作数据不用改页面结构。javascript filter 函数在这里正好配合筛选场景使用。const products [ { id: 1, name: 无线降噪耳机 主动降噪 蓝牙5.4, price: 399, oldPrice: 599, tag: 热卖, type: audio }, { id: 2, name: 智能手表 心率监测 血氧检测 运动模式, price: 999, oldPrice: 1299, tag: 新品, type: watch }, { id: 3, name: 机械键盘 87键 PBT键帽 客制化, price: 199, oldPrice: 299, tag: 秒杀, type: keyboard } ]; const list document.getElementById(product-list); function render(list) { const html list.map(item li classproduct-card>const track document.querySelector(.carousel-track); const slides document.querySelectorAll(.carousel-slide); let currentIndex 0; let intervalId null; function goTo(index) { const total slides.length; if (index total) index 0; if (index 0) index total - 1; currentIndex index; track.style.transform translateX(-${currentIndex * 100}%); } function play() { if (intervalId) clearInterval(intervalId); intervalId setInterval(() { goTo(currentIndex 1); }, 4000); } document.querySelector(.next).addEventListener(click, () { goTo(currentIndex 1); play(); }); document.addEventListener(visibilitychange, () { if (document.hidden) { clearInterval(intervalId); } else { play(); } }); play();核心参数有两个translateX(-${currentIndex * 100}%)是按视口宽度的百分比平移轨道宽度默认就是视口宽度所以每张图正好占满一屏play里先clearInterval再重新设置是防止用户手动切换后旧的定时器和新定时器叠加导致切换速度快一倍。visibilitychange的监听很重要页面切到后台时浏览器会降频定时器回到前台后会连续跳好几张图所以在标签页不可见时清掉定时器可见时重新启动这是轮播最容易被忽略的一个坑。4.3 合并配置对象、筛选函数与事件委托代码写多了配置会散落在各个函数里。页面初始化时通常会把默认配置和用户传入配置合并用Object.assign或展开运算符都能做到。javascript 合并两个对象最稳妥的方式是后者因为写起来清晰也不会误改原对象。const defaultOptions { autoplay: true, interval: 4000, loop: true }; const userOptions { interval: 3000 }; const options { ...defaultOptions, ...userOptions };展开运算符的合并顺序是后者覆盖前者interval最终变成 3000autoplay和loop保持默认值。与Object.assign({}, defaultOptions, userOptions)的效果一致但可读性更好。如果不小心把userOptions放在前面默认值会把用户配置覆盖掉这是新手经常遇到的反直觉问题。商品筛选是另一个高频场景。javascript filter 函数不会修改原数组而是返回一个新数组适合和渲染函数组合使用function filterByType(type) { const filtered products.filter(item item.type type); render(filtered); } document.querySelectorAll(.filter-tab).forEach(tab { tab.addEventListener(click, event { filterByType(tab.dataset.type); }); });动态渲染后的节点需要绑定事件时最简单的方式是在每个按钮上循环绑定但商品列表一旦超过几十个逐个绑定既慢又不好维护。事件委托的思路是把监听器挂到父容器上利用事件冒泡找到真正被点击的子节点。list.addEventListener(click, event { const card event.target.closest(.product-card); if (!card) return; const id Number(card.dataset.id); const product products.find(item item.id id); if (product) { console.log(打开商品, product.name); } });event.target.closest(.product-card)会从实际点击的元素向上找直到匹配到.product-card为止。if (!card) return用来过滤掉点击空白区域的情况比判断tagName更抗结构变化。用dataset.id拿到的字符串转成数字再通过find从数据源中找到完整商品信息这样就避免把整条商品数据塞进>const nav document.querySelector(.nav-bar); const backTop document.querySelector(.back-top); let ticking false; function updateOnScroll() { const scrolled window.scrollY; nav.classList.toggle(fixed, scrolled 120); backTop.classList.toggle(show, scrolled 400); ticking false; } window.addEventListener(scroll, () { if (!ticking) { requestAnimationFrame(updateOnScroll); ticking true; } }, { passive: true }); backTop.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });requestAnimationFrame在这里做节流滚动事件可能一帧内触发多次但updateOnScroll每帧最多执行一次保证读scrollY和改 class 的频率与屏幕刷新率对齐。ticking变量是个锁函数执行完才打开避免一帧内多次请求重复动画帧。classList.toggle的第二个参数是布尔值为真时添加类为假时移除类所以不需要在滚动函数里手动写if/else。一键返回顶部算法性能更好一点的做法是不依赖window.scrollTo的平滑滚动而是自己用requestAnimationFrame做插值因为behavior: smooth在部分浏览器里动画不受控制滚动过程中页面上其他动效也会被影响。简单页面用scrollTo足够长列表页再用插值方案替换。5.2 三行 CSS 验证常见布局问题手写页面到最后最常被问到的不是大功能而是“input 为什么不在容器中间”“图片底部多了一条缝”“标题文字怎么都换行”。这些问题都能用三行模式的 css 文件快速解决也是 css 中把 input 居中最直接的答案。input { display: block; margin: 0 auto; } img { display: block; max-width: 100%; } p { word-break: break-all; }第一组用于区域内的块级 inputdisplay: block让 input 独占一行margin: 0 auto让它在父容器里水平居中。第三方 UI 库的 input 因为本身宽度由父容器决定直接在外层包一个text-align: center效果反而更稳两种方式要区分场景。第二组img { display: block; }消除行内元素放在基线底部产生的 4px 间隙这是图片下方莫名多一条白缝的最常见原因。第三组是针对中英文混排的强制换行数码商品标题里常有英文型号长度过长时会被默认换行规则撑破布局。验证动态效果是否拖慢页面时最简单的办法是打开 DevTools 的 Rendering 面板勾选Paint flashing滚动页面时观察有没有大面积绿色闪烁。闪烁区域越大说明重绘范围越大需要检查是不是某个动效改写了布局属性。再用 Performance 面板录制一次滚动看长任务是否超过 50ms。做用户体感验证时把设备模拟切到低端机型档位固定 CPU 在 4 倍降速再滚一遍大多数卡顿就能暴露出来。本文还有配套的精品资源点击获取
纯CSS+JavaScript打造京东风格电商页面：交互清单与实现技巧
简介一套仿京东数码网页的纯前端源码基于HTML、CSS与JavaScript构建完整呈现电商页面常见的导航、横幅、商品陈列与动态交互适合前端初学者模仿练习也可作为电商风格页面的参考模板。压缩包共20个文件、约503KB内含2个HTML页面、1个CSS样式文件以及17张jpg/png图片素材主要用作商品图、背景图和图标等。已有134人学习下载资源内图片素材分类放置目录结构清晰。通过打开两个HTML文件即可直接查看动态效果对照源码可深入理解CSS布局、Flex/Grid排列以及JavaScript事件处理、轮播等常见交互实现是练习纯前端页面开发的实用素材。1. 仿京东页面真正要先定的是交互清单一个电商页面看起来复杂其实拆开就两类事结构怎么排、交互怎么动。而仿京东数码这种页面最花时间的往往不是 html 和 CSS 的骨架而是鼠标移入、滚动、轮播、切换这一串动态效果怎么用原生三件套还原出来。很多开发者第一反应是找组件库但纯 CSS HTML JavaScript 反而能把页面做得很轻也能把每个动效的触发条件、参数和边界都握在自己手里。这篇内容适合两类人一类是刚能把页面画出来、想补齐交互细节的前端另一类是需要用原生技术写活动页、专题页的工程师。先列交互清单再逐段落地后面的代码都是在为清单里的动作兜底。2. 布局与卡片栅格、优惠券锯齿、两行超出省略几乎所有电商页面都长在同一套骨架上顶部搜索栏、商品导航、轮播焦点图、商品流。模拟京东数码频道时不需要把整站搬下来重点是先把商品卡片的布局规则定清楚因为商品卡片是动态效果的主要载体轮播、筛选、hover 反馈都在它上面发生。2.1 栅格骨架与区块划分常见的做法是先定一个版心宽度然后把商品列表做成响应式栅格。京东的版心在 PC 端是 1190px我一般会用max-width: 1190px; margin: 0 auto;来做容器既不写死宽度也不会在大屏下拉伸得失去控制。列表区的栅格用 CSS Grid 最省事因为gap属性直接管理卡片间距不需要给每个子项写margin。div classcontainer ul classproduct-grid idproduct-list !-- 商品卡片由 JavaScript 渲染 -- /ul /div.container { max-width: 1190px; margin: 0 auto; padding: 0 12px; } .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; padding: 0; } media (max-width: 768px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }repeat(4, 1fr)表示每一行放 4 列每一列等分剩余宽度。1fr是 Grid 里的比例单位卡片宽度会随容器伸缩不会出现一列被内容撑破、其他列收缩的情况。媒体查询里改成repeat(2, 1fr)是为了在窄屏下避免卡片过窄被迫内部换行属于移动端最先要考虑的一个降级策略。2.2 商品卡片的三个 CSS 关键点内边距、价格、两行省略商品卡片看起来简单但经常返工的是三处图片与文字的内边距、价格与原价的层级关系、标题超出一行或两行后的截断方式。先看一个最小可用的卡片结构li classproduct-card a href# div classthumb img srcimg/headphone.jpg alt无线降噪耳机 span classtag热卖/span /div div classinfo h3无线降噪耳机 主动降噪 蓝牙5.4 长续航/h3 div classprice-row b classprice399/b !-- css 删除线的典型场景原价 -- s classold-price599/s /div /div /a /li.product-card { background: #fff; border-radius: 8px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .product-card .thumb { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #f5f5f5; } .thumb img { width: 100%; height: 100%; object-fit: cover; } .product-card .info { padding: 12px 14px 16px; } .product-card h3 { font-size: 14px; line-height: 1.5; color: #333; /* 两行超出省略由下面三行组成 */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; } .price { color: #e1251b; font-size: 18px; font-weight: 700; } .old-price { color: #999; font-size: 13px; text-decoration: line-through; }aspect-ratio: 1 / 1能保证图片区域始终是正方形配合object-fit: cover图片裁切后不会变形。这里要注意浏览器兼容性已经不是问题但老的移动 WebView 里有时还要img { display: block; }来消掉行内元素底部产生的间隙这个细节很容易被忽略。两行超出省略是三行模式的 css 文件里很实用的东西display: -webkit-box声明为弹性盒子-webkit-line-clamp控制显示行数-webkit-box-orient指定主轴方向最后overflow: hidden。这一组不能拆少一行都可能在某些浏览器里失效尤其是box-orient很多缩写工具会把它丢掉。2.3 促销标签与优惠券锯齿的圆切实现促销标签和优惠券是数码频道里最常见的视觉元素。标签好做一个绝对定位的span加背景色就行难点是优惠券左右两侧的半圆缺口也就是热词里常说的 css 优惠券圆切。最简单的方案是用伪元素加圆形背景让圆点盖在卡片边缘形成视觉上的“打孔”效果。.coupon { position: relative; display: inline-block; padding: 6px 24px; border: 1px dashed #e1251b; color: #e1251b; font-size: 13px; } .coupon::before, .coupon::after { content: ; position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #f5f5f5; transform: translateY(-50%); } .coupon::before { left: -6px; } .coupon::after { right: -6px; }伪元素的圆形背景必须和页面背景一致而不是白色否则圆切位置会露出白点。这里用#f5f5f5是因为所在区块背景就是浅灰。如果页面背景是渐变或图片这个方法就不好用了更严谨的做法是用clip-path直接裁切出锯齿但clip-path画的锯齿边缘不平滑而且对边框虚线支持不自然。实现方式代码量锯齿圆滑度适用场景伪元素圆形遮盖8-10 行高纯色背景clip-path 锯齿5-8 行边缘生硬无边框、纯色背景SVG 背景图需要单独文件高需要多色、渐变背景促销标签我建议用position: absolute挂在图片左上角标签宽度不固定用left: 8px; top: 8px; padding: 2px 8px;控制位置和尺寸不要用固定宽度避免文案变长后溢出。3. 纯 CSS 动效鼠标移入、字体渐变与打点加载栅格搭好、卡片有了静态样子后下一步是把“动”的部分交给 CSS 处理。电商页的动态效果有相当大比例是纯 CSS 能完成的而且比 JavaScript 驱动更顺滑因为过渡和动画跑在合成器线程上不需要频繁改 DOM 属性。这一章重点拆三个场景鼠标移入反馈、价格字体渐变、打点 loading。3.1 用 hover 和 transition 还原鼠标移入事件京东数码卡片最常见的反馈是“上浮 阴影加深 图片轻微放大”。鼠标移入事件在这里不需要 JavaScript 监听CSS 的:hover配合transition就可以完整覆盖。注意一个原则不要在 hover 状态下直接改width、height、top这些会触发布局重排的属性优先改transform和box-shadow。.product-card { transition: transform .25s ease, box-shadow .25s ease; } .product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, .08); } .thumb img { transition: transform .4s cubic-bezier(.25, .8, .25, 1); } .product-card:hover .thumb img { transform: scale(1.06); }transition的拆分写法把transform和box-shadow分开声明这样两个属性的变化时长和曲线可以独立控制。图片放大用的是.product-card:hover .thumb img后代选择器因为放大的 flash 效果只作用于图片但触发的热区是整个卡片。cubic-bezier曲线比默认的ease更柔和前慢后快松手时不突兀。这里有一个容易犯的错transition写在了:hover里面导致鼠标移出时动画瞬间消失。正确做法是把transition写在默认状态上让移入和移出都平滑过渡。3.2 价格区的字体渐变和红黑层级价格是数码频道视觉重点京东常用红色渐变来强调数字但渐变方向、饱和度都要克制否则整屏数字都在发光会显得很吵。css 字体渐变的原理是先用background渲染渐变再用background-clip: text把背景裁剪到文字形状最后把文字颜色设为透明。.price { background: linear-gradient(180deg, #e1251b 0%, #ff6a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 20px; font-weight: 700; }要留意-webkit-background-clip: text的前缀虽然现代浏览器普遍支持无前缀写法但为了保险两个都要写。透明文字如果遇到不支持background-clip: text的浏览器会变成不可见所以这种效果只适合用在有降级方案的位置上。实战中我通常把数字拆成“梯梯”结构整数部分用大字号红色小数部分用小字号灰色让价格看起来更专业。3.3 用 steps 做打点 loading 动画商品列表在请求数据等待、图片懒加载时经常会用到打点动画“加载中”后面跟着三个点依次出现。css 打点不复杂核心是用steps()做一个步进动画把宽度从 0 撑到 3em通过overflow: hidden截断文字模拟出点逐个出现的效果。p classloading加载中span/span/p.loading span { display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; animation: dotting 1.2s steps(3, end) infinite; } keyframes dotting { 0% { width: 0; } 100% { width: 3em; } }steps(3, end)表示整个动画分成 3 次跳跃完成end参数让每一跳在动画时间段末尾生效这样点不是连续滑出来的而是按“加载中”“加载中.”“加载中..”“加载中...”的节奏递进。width从 0 到 3em每跳增加 1em正好一个点宽。这个方案不需要操作 content也不依赖任何框架对中文排版友好。4. JavaScript 动态化渲染、轮播与事件委托纯 CSS 解决的是“静态页面上的动态感”但商品列表的渲染、焦点图的切换、Tab 筛选这些真正的数据变化还是要交给 JavaScript。这一章用的都是基础语法不引入框架和构建工具打开 html 文件就能跑通。4.1 用数组加模板字符串渲染商品列表商品卡片不要一条条写在 HTML 里而是把数据放到数组里再用模板字符串批量生成。这样后续接入接口、做筛选和排序都直接操作数据不用改页面结构。javascript filter 函数在这里正好配合筛选场景使用。const products [ { id: 1, name: 无线降噪耳机 主动降噪 蓝牙5.4, price: 399, oldPrice: 599, tag: 热卖, type: audio }, { id: 2, name: 智能手表 心率监测 血氧检测 运动模式, price: 999, oldPrice: 1299, tag: 新品, type: watch }, { id: 3, name: 机械键盘 87键 PBT键帽 客制化, price: 199, oldPrice: 299, tag: 秒杀, type: keyboard } ]; const list document.getElementById(product-list); function render(list) { const html list.map(item li classproduct-card>const track document.querySelector(.carousel-track); const slides document.querySelectorAll(.carousel-slide); let currentIndex 0; let intervalId null; function goTo(index) { const total slides.length; if (index total) index 0; if (index 0) index total - 1; currentIndex index; track.style.transform translateX(-${currentIndex * 100}%); } function play() { if (intervalId) clearInterval(intervalId); intervalId setInterval(() { goTo(currentIndex 1); }, 4000); } document.querySelector(.next).addEventListener(click, () { goTo(currentIndex 1); play(); }); document.addEventListener(visibilitychange, () { if (document.hidden) { clearInterval(intervalId); } else { play(); } }); play();核心参数有两个translateX(-${currentIndex * 100}%)是按视口宽度的百分比平移轨道宽度默认就是视口宽度所以每张图正好占满一屏play里先clearInterval再重新设置是防止用户手动切换后旧的定时器和新定时器叠加导致切换速度快一倍。visibilitychange的监听很重要页面切到后台时浏览器会降频定时器回到前台后会连续跳好几张图所以在标签页不可见时清掉定时器可见时重新启动这是轮播最容易被忽略的一个坑。4.3 合并配置对象、筛选函数与事件委托代码写多了配置会散落在各个函数里。页面初始化时通常会把默认配置和用户传入配置合并用Object.assign或展开运算符都能做到。javascript 合并两个对象最稳妥的方式是后者因为写起来清晰也不会误改原对象。const defaultOptions { autoplay: true, interval: 4000, loop: true }; const userOptions { interval: 3000 }; const options { ...defaultOptions, ...userOptions };展开运算符的合并顺序是后者覆盖前者interval最终变成 3000autoplay和loop保持默认值。与Object.assign({}, defaultOptions, userOptions)的效果一致但可读性更好。如果不小心把userOptions放在前面默认值会把用户配置覆盖掉这是新手经常遇到的反直觉问题。商品筛选是另一个高频场景。javascript filter 函数不会修改原数组而是返回一个新数组适合和渲染函数组合使用function filterByType(type) { const filtered products.filter(item item.type type); render(filtered); } document.querySelectorAll(.filter-tab).forEach(tab { tab.addEventListener(click, event { filterByType(tab.dataset.type); }); });动态渲染后的节点需要绑定事件时最简单的方式是在每个按钮上循环绑定但商品列表一旦超过几十个逐个绑定既慢又不好维护。事件委托的思路是把监听器挂到父容器上利用事件冒泡找到真正被点击的子节点。list.addEventListener(click, event { const card event.target.closest(.product-card); if (!card) return; const id Number(card.dataset.id); const product products.find(item item.id id); if (product) { console.log(打开商品, product.name); } });event.target.closest(.product-card)会从实际点击的元素向上找直到匹配到.product-card为止。if (!card) return用来过滤掉点击空白区域的情况比判断tagName更抗结构变化。用dataset.id拿到的字符串转成数字再通过find从数据源中找到完整商品信息这样就避免把整条商品数据塞进>const nav document.querySelector(.nav-bar); const backTop document.querySelector(.back-top); let ticking false; function updateOnScroll() { const scrolled window.scrollY; nav.classList.toggle(fixed, scrolled 120); backTop.classList.toggle(show, scrolled 400); ticking false; } window.addEventListener(scroll, () { if (!ticking) { requestAnimationFrame(updateOnScroll); ticking true; } }, { passive: true }); backTop.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });requestAnimationFrame在这里做节流滚动事件可能一帧内触发多次但updateOnScroll每帧最多执行一次保证读scrollY和改 class 的频率与屏幕刷新率对齐。ticking变量是个锁函数执行完才打开避免一帧内多次请求重复动画帧。classList.toggle的第二个参数是布尔值为真时添加类为假时移除类所以不需要在滚动函数里手动写if/else。一键返回顶部算法性能更好一点的做法是不依赖window.scrollTo的平滑滚动而是自己用requestAnimationFrame做插值因为behavior: smooth在部分浏览器里动画不受控制滚动过程中页面上其他动效也会被影响。简单页面用scrollTo足够长列表页再用插值方案替换。5.2 三行 CSS 验证常见布局问题手写页面到最后最常被问到的不是大功能而是“input 为什么不在容器中间”“图片底部多了一条缝”“标题文字怎么都换行”。这些问题都能用三行模式的 css 文件快速解决也是 css 中把 input 居中最直接的答案。input { display: block; margin: 0 auto; } img { display: block; max-width: 100%; } p { word-break: break-all; }第一组用于区域内的块级 inputdisplay: block让 input 独占一行margin: 0 auto让它在父容器里水平居中。第三方 UI 库的 input 因为本身宽度由父容器决定直接在外层包一个text-align: center效果反而更稳两种方式要区分场景。第二组img { display: block; }消除行内元素放在基线底部产生的 4px 间隙这是图片下方莫名多一条白缝的最常见原因。第三组是针对中英文混排的强制换行数码商品标题里常有英文型号长度过长时会被默认换行规则撑破布局。验证动态效果是否拖慢页面时最简单的办法是打开 DevTools 的 Rendering 面板勾选Paint flashing滚动页面时观察有没有大面积绿色闪烁。闪烁区域越大说明重绘范围越大需要检查是不是某个动效改写了布局属性。再用 Performance 面板录制一次滚动看长任务是否超过 50ms。做用户体感验证时把设备模拟切到低端机型档位固定 CPU 在 4 倍降速再滚一遍大多数卡顿就能暴露出来。本文还有配套的精品资源点击获取
