Wenli Zhangs CV 的 pagePiling.js 完全教程翻页滚动、左侧导航与底部循环【免费下载链接】cvWenli Zhangs CV as Web Front-End Engineer项目地址: https://gitcode.com/gh_mirrors/cv4/cvWenli Zhangs CV 是一个用pagePiling.js插件打造的整屏翻页简历网页仅用 30 行左右的 JS就实现了翻页滚动、左侧导航和底部循环三大效果。本教程带你逐段读懂这套实现新手也能照着自己搭出同款翻页页面 为什么简历要做成翻页式这份简历把个人介绍、项目、技能、教育、实习、现职、联系 7 大块内容做成了 7 个整屏 section。用户滚动鼠标或按方向键时页面会像幻灯片一样一次翻一页而不是传统网页的连续滚动。这种交互靠的就是 pagePiling.js——一个基于 jQuery 的整屏滚动插件bower.json中声明的版本为~0.0.7。它的结构非常直白在index.html中所有 section 都装在一个#pagepiling容器里div idpagepiling div classsection idhome…/div div classsection idproject…/div !-- 共 7 个 .section -- /div只要让 pagePiling.js 接管这个容器翻页效果就自动生效。最快上手3 步搭出翻页页面第 1 步获取项目代码git clone https://gitcode.com/gh_mirrors/cv4/cv第 2 步安装依赖并构建项目用 bower 管理第三方库、用 gulp 编译 SCSS。gulpfile.js里的vendor任务会把 pagePiling.js 的 JS 和 CSS 拷贝到vendor/目录compass任务则把scss/下的样式编译到css/目录。装好 Node.js 和 gulp 后在项目目录运行gulp即可。第 3 步初始化插件核心逻辑全部在js/index.js里去掉移动端判断后只有十几行$(#pagepiling).pagepiling({ loopBottom: true, navigation: { position: left, tooltips: isCn ? cn : en }, onLeave: function(index, nextIndex, direction) { // 翻页时给其他页面加上 leaving 样式 } });就这 3 个配置项对应标题里的三大效果下面逐一拆解。翻页滚动一次一页的丝滑切换pagePiling.js 默认接管了鼠标滚轮、触摸滑动和键盘方向键section 之间的位移动画由它内置的 CSS 完成。本项目的丝滑感还多了一味调料在scss/_base.global.scss中每个.section都设置了transition: 0.5s翻页结束后有 0.5 秒的平滑过渡。onLeave回调则负责变色细节翻到哪一页其他所有页面就加上leaving类背景从主色切换到对比色让当前页在视觉上浮出来.section { .leaving { background-color: $clr-contrast; } }还有一个防闪烁小技巧初始化前给所有 section 加上initing类display: none等 pagePiling.js 布局完成后再移除避免页面加载瞬间看到所有 section 挤在一起的白屏闪烁。左侧导航一行配置 中英文提示pagePiling.js 的navigation配置会自动在页面一侧生成圆点导航。本项目用两行完成了它position: left把导航圆点固定到左侧tooltips给每个圆点加上悬停提示文字并且会跟随语言切换——英文页显示[Home, Projects, Professions, …]cn.html中文页显示[首页, 项目, 技能, …]判断逻辑就一句location.href里有没有cn.html。点击任意圆点即可直达对应 section这是整屏页面必备的可访问性兜底。底部循环看完最后一页还能回到第一页loopBottom: true是最短、也最容易被忽略的一项配置。它让翻页滚动在底部也能循环在最后一页继续下滑会回到第一页形成无缝的循环浏览体验。对简历这种看完就想从头看一次的场景非常合适。移动端降级不翻页优雅回退翻页页面最怕手机上的体验翻车这个项目做了两层兜底JS 层js/index.js顶部的mobilecheck()通过 UA 正则检测移动设备命中后直接跳过 pagePiling 初始化给html加上mobile类页面退化为普通滚动布局CSS 层scss/_mobile.settings.scss为移动端单独缩小字号、调整头像与间距scss/_components.columns.scss则在 760px 以下屏幕直接display: none隐藏#pp-nav左侧导航圆点。这一JS 检测 CSS 媒体查询的组合是所有整屏翻页项目都该抄的作业。小结3 个配置项撑起一个翻页页面配置作用所在文件loopBottom: true底部循环滚动js/index.jsnavigation: { position: left }左侧圆点导航js/index.jsonLeave回调翻页联动变色js/index.jsscss/_base.global.scss看完这份代码你会明白pagePiling.js 把整屏翻页最难的定位和动画都封装好了你要做的只是写对 section 结构、配好 3 个选项、处理好移动端降级——剩下交给插件。按这个思路你也可以为自己的作品集或落地页快速搭出一个漂亮的翻页滚动页面 ✨【免费下载链接】cvWenli Zhangs CV as Web Front-End Engineer项目地址: https://gitcode.com/gh_mirrors/cv4/cv创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考