- 昨天写了一个草帽海贼团的动态网页,用的是原生JS写的,个人感觉网页的风格还是挺不错的。
- 网页采用了fullpage的技术,通过鼠标滚轮切换显示的内容,也可同过头部文字或右侧的小圆点导航到相应的页面
- 首页是一个用JS写的自动轮播和手动轮播组合的的轮播图,如下图
- 后续的几页都是单独每人一页,我并没有对人物进行过多的介绍,只是简单的写了基本信息而已,组成的是相对于的人物图片,我将图片制作成了相框,个人感觉风格看起来比较好,再加上JS控制动画,网页整体显示效果个人感觉挺酷的
- 网页内所有的图片都是从网上找的,再用PS扣成PNG格式的,看起来才不会与每一页的背景图其冲突
- 如下图:是单独路飞的一页
好了,说这么多还不如直接上作品,感兴趣的可以通过:http://yezhazha.3vkj.net/ 该网址访我的作品(注:网页不是响应式的,需要从PC端浏览,还望见谅),里面还包含了其他几个,例如音乐播放器、小游戏等,网页的加载比较慢,还望见谅。
8、最后再附上海贼王网页的源码跟原图:JS的内容有详细的注释,应该不难看懂
链接:https://pan.baidu.com/s/11pMU3JGCMlKDQuSdqUaItA
提取码:hmx7
----------------------------------------------------------------------------
2020/12/30更新以下点
- 由于H5期末大作业要求,需要有一个首页,八个子页,所有在其原有基础上增添了三页新的内容
- 性能优化:
- 由于该网页图片过多,已对网页中所有img标签的图片进行了图片懒加载,只有当切入当前显示的屏,才会发送请求获取图片,避免一打开网页就将所有img请求都发出去(谷歌的并发请求数是有限制的,超过该数,其他请求会阻塞,只有等请求完成后才能继续进行获取图片请求)
- 对函数进行了防抖处理,避免函数高频触发
- 网页效果:
- 添加了'打字机'效果的文字,会在切换到当前屏后触发调用,将文字一个个打到网页上
- 增加了视频播放,引入了抖音两个关于草帽海贼团的视频
- 放置了一个赏金翻转图片墙,正面为人物图,鼠标移入后会翻转显示其对应的赏金图
- 引入了网上的小Demo-->三D立体旋转图片的正方形
- 具体效果可以访问网页:http://ye_0216.gitee.io/onepiece/