带弹性的导航栏

妙味的官网和智能社的官网上,会看到一个带弹性的导航栏,这个导航栏的效果非常流畅,其实这个效果并不难实现,说一下思路:正常的导航栏布局,只是在第一个li前加一个div,设置定位为绝对定位,并给div设置背景,设置其z-index值为1,设置li的z-index值为2,设置其父元素ul为相对定位,li设置成相对定位,li如果不设置成相对定位,会出现z-index失效的麻烦,然后用js调节背景的位置,当然了,还需要引入写好的弹性运动框架,弹性运动框架需要注意的问题是,检测终止条件,和终止之后直接将div拖到目标点。

 

代码地址:https://github.com/peng666/blogs/tree/gh-pages/flex

在线测试地址:http://peng666.github.io/blogs/flex

posted @ 2016-05-26 08:37  小全栈  阅读(324)  评论(0编辑  收藏  举报