原生JS写全屏滚动插件教程

第一节

  • 分析全屏滚动网页
  • 编写首屏html结构
  • 编写首屏css

全屏滚动

  • 可以添加若干个屏进行滚动
  • 可以自动播放动画或延迟播放动画
  • 可以手动点击按钮触发动画

编写HTML结构

代码编辑器中展示了我们要写的全屏插件需要的html容器元素

编写CSS宏观样式

代码编辑器中预置了HTML结构对应的很简单的css样式代码,注意开头要重置浏览器默认样式.


目前只实现最基本的样式,后续实现全屏滚动会补上更多的样式。

查看结果

点击代码编辑器右上角的 Run 运行
觉得展示区域太小可以点击 全屏展示

运行后可以看到page1,用鼠标滚动可以看到下面的page2,这就完成了最基本的结构搭建和基础样式,下一节才是真正的开始。