以为的js导航栏

以为的js导航栏

开发工具与关键技术:DW、Transform
作者:小赵
撰写时间:2019/2/21

安逸的假期也该结束,你的内心是否躁动起来了;是否在抱怨假期太短,还是在虚度假期?在网络丰富的时代,是否有很多新鲜的事物冲击着你的视野,在查找的时候有些缭乱;不要紧张,我们动手了解一下风琴导航,通过简单的css就可以实现,js的动态功能;向来看下简单的HTML布局吧,如下截图:在这里插入图片描述
在截图中我们看到,HTML的布局是很简单的,使用了有序列表标签和无序列表标签,使用无序列表标签制作风琴导航,有序列表标签制作条状下滑导航,两个导航栏都有其相同之处,不同之处就是位移方向不同;其写法与用法都一致,其布局效果见截图:在这里插入图片描述
通过transform改变位移量,实现导航栏的效果,改变位移的三写法translate()、translateX()、translateY(),其中离不开translate这个单词为核心的不同方向的延伸;风琴导航利用了translateX()方向的位移量变化达到js的动态显示效果;上下滑动导航利用translateY()的位移量的变化;有了位移量还不行,还需要执行的时间以及延迟的时间共同控制。因为导航栏的效果是动态,个人的能力不足,在这无法演示动态效果,但本人亲自演示的效果是真实的。是不是心动了?俗话说心动不如行动,赶紧动手行动起来吧!下截图为风琴导航的动态中的静态图:在这里插入图片描述
下截图是实现导航动态功能的代码,使用了子选择器,给每一个li标签设定相差0.05s的延迟时间,整个运动过程为0.2s在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44519188/article/details/87862584
0条评论
添加一条新回复