【版权声明】未经博主同意，谢绝转载！（请尊重原创，博主保留追究权）
https://www.cnblogs.com/cnb-yuchen/p/18032062>
出自【进步*于辰的博客】

大学学习前端的时候，我们团队以【网易游戏官网】中的部分游戏页面作为参考开发了一些页面作为实训作品（作品源码我已上传→ 网易游戏官网-部分游戏页面源码.rar）。

• 1、首页
• 2、网页一：（2021校园招聘）网页
  • 2.1 特效一
  • 2.2 特效二
• 3、网页二：（明日之后）游戏网页
  • 3.1 特效一
• 最后

1、首页

[video(video-gqUOIE9A-1680668437486)(type-csdn)(url-https://live.csdn.net/v/embed/288056)(image-https://video-community.csdnimg.cn/vod-84deb4/e4b2aac0d36771ed962e0764a3fd0102/snapshots/ff468ca457684709a64c492e59813eeb-00002.jpg?auth_key=4834267875-0-0-53e0000ef21e1189fea512bfc0df5f5a)(title-网易游戏官网首页)]

2、网页一：（2021校园招聘）网页

页面预览。
[video(video-HA1ajsVy-1680681302802)(type-csdn)(url-https://live.csdn.net/v/embed/288059)(image-https://video-community.csdnimg.cn/vod-84deb4/e07d2c80d36971ed8b870675b3ed0102/snapshots/2f996316a9694163b2d1a5d23b6fb3d0-00003.jpg?auth_key=4834268733-0-0-d0af1ef8653c0e75739869208c3a2b3d)(title-网易游戏官网-【2021校园招聘】页面效果)]

2.1 特效一

效果。

实现思路：

1. 不断移动的是通过annotation（动画）实现的，只是移动方向、移动距离、动画周期以及移动时机等不同；
2. 不断移动的其实是一张张图片，点击切换时“修改图片路径”（换图）。这里，我是用 js 数组来存放图片路径，也用到了 js 对象。

2.2 特效二

效果。

实现思路：

“人物聚合”的效果是将多张图片切割、再合并、过渡实现的。

人物的“大盒子”是由25个大小相同的“小盒子”拼接而成。

宽：大盒子 = 小盒子；高：大盒子 = 小盒子 * 25

将一张人物图片（调整其宽高与“大盒子”相同）横截成25等份。

每一份的宽与“大盒子”相同，高是“大盒子”的 1/25

并不是真的截开，不破坏这张图，只是用于记录每一份所占的纵向像素起始点，一共25个像素区间，区间的长度记为“像素段”。

然后将这张图复制24份（一共25张），将这25张图片对应前一步所得的25个像素区间。并将其作为25个“小盒子”的背景图片。

设置好背景后，将图片上移。

上移的像素等于（n - 1）个像素段，n 是“小盒子”序号

因此，每个“小盒子”的背景图片都是人物图的1/25。拼接起来就是一张完整的人物图。

最后，将这25个“小盒子”分别设置一个“初始位置”，并隐藏。

left: -xxpx;
// 或：
transform: translateX(-xxpx);

当点击人物切换时，修改这25个“小盒子”的背景图片路径、将“小盒子”过渡平移到“大盒子”内、即可实现“聚合”效果。

3、网页二：（明日之后）游戏网页

页面预览。
[video(video-fUZSsdfM-1680681695210)(type-csdn)(url-https://live.csdn.net/v/embed/288060)(image-https://video-community.csdnimg.cn/vod-84deb4/62b979b0d36a71ed8b870675b3ed0102/snapshots/93139276500544a3bd6239cc743b493a-00003.jpg?auth_key=4834268946-0-0-b4f2193a6966bb0477eff6e6b2715c5a)(title-网易游戏官网-【明日之后】游戏页面效果)]

3.1 特效一

效果。


实现思路：

1. 这个特效如何实现的大家肯定已经看出来了，就是合并了（2021校园招聘）网页那两个特效的部分功能。不赘述了。

最后

本文中的视频由【ev录屏】软件录制，gif 图片由【GifCam】小工具录制，这个工具的安装包在这里→ 办公实用小工具锦集.rar，兴许大家用得到。

本文完结。