欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端网页--H5--海贼王动态网页源码

程序员文章站 2022-06-22 11:49:26
昨天写了一个草帽海贼团的动态网页,用的是原生JS写的,个人感觉网页的风格还是挺不错的。网页采用了fullpage的技术,通过鼠标滚轮切换显示的内容首页是一个用JS写的自动轮播和手动轮播组合的的轮播图,如下图后续的几页都是单独每人一页,我并没有对人物进行过多的介绍,只是简单的写了基本信息而已,组成的是相对于的人物图片,我将图片制作成了相框,个人感觉风格看起来比较好,再加上JS控制动画,网页整体显示效果个人感觉挺酷的网页内所有的图片都是从网上找的,再用PS扣成PNG格式的,看起来才不会与每一页的...
  1. 昨天写了一个草帽海贼团的动态网页,用的是原生JS写的,个人感觉网页的风格还是挺不错的。
  2. 网页采用了fullpage的技术,通过鼠标滚轮切换显示的内容,也可同过头部文字或右侧的小圆点导航到相应的页面
  3. 首页是一个用JS写的自动轮播和手动轮播组合的的轮播图,如下图前端网页--H5--海贼王动态网页源码
  4. 后续的几页都是单独每人一页,我并没有对人物进行过多的介绍,只是简单的写了基本信息而已,组成的是相对于的人物图片,我将图片制作成了相框,个人感觉风格看起来比较好,再加上JS控制动画,网页整体显示效果个人感觉挺酷的
  5. 网页内所有的图片都是从网上找的,再用PS扣成PNG格式的,看起来才不会与每一页的背景图其冲突
  6. 如下图:是单独路飞的一页 
  7. 前端网页--H5--海贼王动态网页源码

好了,说这么多还不如直接上作品,感兴趣的可以通过:http://yezhazha.3vkj.net/ 该网址访我的作品(注:网页不是响应式的,需要从PC端浏览,还望见谅),里面还包含了其他几个,例如音乐播放器、小游戏等,网页的加载比较慢,还望见谅。

8、最后再附上海贼王网页的源码跟原图:JS的内容有详细的注释,应该不难看懂

链接:https://pan.baidu.com/s/11pMU3JGCMlKDQuSdqUaItA 
提取码:hmx7

 

 

本文地址:https://blog.csdn.net/weixin_45902966/article/details/107504163