前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)实现【网易游戏】页面特效

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

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

1、首页

由于本站无法上传视频,请大家转站CSDN预览页面效果 → 网易游戏官网-首页效果

2、网页一:(2021校园招聘)网页

由于本站无法上传视频,请大家转站CSDN预览页面效果 → 网易游戏官网-【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、网页二:(明日之后)游戏网页

由于本站无法上传视频,请大家转站CSDN预览页面效果 → 网易游戏官网-【明日之后】游戏页面效果

3.1 特效一

效果。
在这里插入图片描述
在这里插入图片描述

实现思路:

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

最后

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

本文完结。

posted @ 2024-06-03 11:54  进步·于辰  阅读(9)  评论(0编辑  收藏  举报  来源