多屏动画

(作者：饶家俊，撰写时间：201年1月26号)

什么是多屏动画，点击一个地方，你看见的页面有切换的效果，你可以切换多次图片。

先用一个大的div添加了类和id, 包着小的div，在给它们2个类一共8个。

最外面的div设置了top等于0。

在下面一个div添加了类，还加了id，里面放了一张图片，是一朵花。

最外面的div设置了绝对定位,和100%的宽度。

也给八个div加了加了100%的宽度，又从yi到ba设置了颜色添加了不同的图片。

在设置body：hidden ;
让可视区域图片显示其他隐藏。

在下面是设置html放的一朵小花，用固定定位来移动，在设置宽高和css关键keyfram动画。（还不知道的朋友来我的博客里找到，css关键帧 keyframes动画使用方法，里面有教你怎么用哦，记得关注哦。）

又怎么实现图片会随着你页面的可视区域高度改变。

先设置高度的变量，在添加函数在取个名字setHeight。

在用height获取到innerHeight。

在随便取个名字，来获取八个div都有的类zz。

在给它们设置高度，用for循环设置变量。

在最上面来调用setHeight();

最下面也调用了setHeight()；是设置可视区域尺寸发生变化要调用的函数。

在到获取到最外面的id，在用div里面放了一朵花的id来设置点击切换的效果
，在用最外面的id来设置top的值，用最新的top值-height来获取高度。