实现自动展开与收起

开发工具与关键技术:DW与js
作者:茅凯翔
撰写时间:2019年1月19日星期六

说到展开与收起,我们可以想到的是点击的展开与收起,我准备说的是自动的展开与收起。
首先我们来看看HTML5的代码怎么写,给两个div。第一个红色线的div是隐藏部分,第二个蓝色线的div是显示的部分,如下图:
在这里插入图片描述
然后我们再来看CSS3的代码怎么写。
“#”这个符号代表ID的选择器,你在里面放入图片,要是图片大小大于你设置的盒子的大小,你就是加一个background-size:cover代码,可以让图片自动适应盒子大小。你可以随意设置隐藏部分的高宽度。如下图:
在这里插入图片描述
最后我们看一下JS的代码。
第一个Function open()封装的代码是展开的样式,第二个Function close()封装的代码是收起来的样式。最下面两行的代码是,第一个是设置页面加载完毕1秒后执行open函数,第二个是页面加载10秒后执行的函数,秒数可以随便更改。如下图:
在这里插入图片描述
我们来看看效果是怎么样的,如下图:
如下图:还没启动的效果
在这里插入图片描述

如下图:执行代码的效果图
在这里插入图片描述
时间到了它就是自己收起来了,你再刷新一下,它就启动了,谢谢!

猜你喜欢

转载自blog.csdn.net/weixin_44540181/article/details/86554424