带弹性的导航栏
妙味的官網和智能社的官網上,會看到一個帶彈性的導航欄,這個導航欄的效果非常流暢,其實這個效果并不難實現,說一下思路:正常的導航欄布局,只是在第一個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
轉載于:https://www.cnblogs.com/zpfind/p/5529631.html
總結
- 上一篇: Clumsy网络模拟工具
- 下一篇: Zookeeper系列(一)