前端代码：悬停伸缩滑块，图片堆叠与展开的效果

一屏多卡的悬停伸缩滑块，四个版块随鼠标展开，竖排标题可平滑横排过渡，搭配全屏照片背景与加载动效，轻量依赖 jQuery，本地化无外链，适合落地页/作品集/栏目导航等炫酷首屏。

亮点卖点

• 悬停即展开：flex 弹性布局控制宽度，hover 时标题旋转归位、描述淡入，交互直观。
• 加载动效：内置方块交错动画的遮罩，window.load 后自动淡出。
• 本地化依赖：jQuery 与样式均在本地，无远程字体/图片/CDN。
• 全屏照片：四个分栏各有本地化高清背景图，叠加暗层保证文字可读。
• 表单示例：自带邮箱/留言表单结构，方便直接对接后端。
• 品牌露出：顶部圆角徽章展示“KS主题 · 悬停伸缩滑块”，可按需替换。

设计风格

• 亮暗叠加的线性渐变，营造科技感与层次感。
• 大字号标题 + 细线条边框描述，强化分栏对比。
• 固定顶徽章与居中布局，保证焦点聚集。

适用场景

• 创意品牌或产品的首屏导航/专题入口。
• 作品集、案例集的快速浏览与分栏介绍。
• 活动页、招聘页、公司介绍等需要多栏目呈现的轻交互场景。

使用说明

1. 直接打开 index.html 预览，或放入本地服务器运行。
2. 替换文案：修改每个 .flex-slide 内的标题/描述/列表/表单占位。
3. 调整品牌：编辑 index.html 顶部 .brand-badge 文本或链接。
4. 调色/风格：在 style.css 中调节背景图片/遮罩深度、字体、按钮等样式，标题过渡的位移/缩放也可在其中调整。
5. 行为修改：在 script.js 中调整 hover 交互或加载遮罩的动画时长。

技术栈与本地依赖

• 纯 HTML + CSS + jQuery（无 ES6 module）。
• 本地文件：style.css、script.js、js/jquery.min.js、js/jquery.waitforimages.min.js，背景图已本地化到 assets/images，无外部 CDN 或远程图片。

结构速览

• index.html：主体布局、品牌徽章、四个分栏与表单。
• style.css：布局、背景图与遮罩、标题过渡、文字与动画样式。
• script.js：加载遮罩淡出、悬停展开/收起逻辑（基于 waitForImages）。
• js/jquery.min.js：本地 jQuery。

二次定制小贴士

• 需要更多栏目：复制 .flex-slide 块并调整背景渐变与文案。
• 想让移动端默认展开：在媒体查询内为 .flex-slide 设置更大的 flex-grow。
• 若需接入真实提交，可在表单上绑定 AJAX 或表单 action，保留现有样式即可。