多屏动画

(作者:饶家俊,撰写时间: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来获取高度。
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44560394/article/details/86660782