导航栏之抖动效果
Posted 喵小娇
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了导航栏之抖动效果相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>17-4-2</title>
6 <style>
7 *{padding: 0; margin: 0;}
8 li{list-style: none;}
9
10 ul{width: 400px; height: 30px; position: relative; margin: 100px auto;}
11 li{float: left; width: 98px; height: 28px; line-height: 28px; border: 1px solid black; text-align: center; z-index: 2; position: relative; cursor: pointer;}
12 .bg{width: 100px; height: 5px; overflow: hidden; background: crimson; border: none;position: absolute; top: 24px; left: 0; z-index: 1;}
13 </style>
14 <script>
15 window.onload=function () {
16 var oUl=document.getElementById(\'ul1\');
17 var aLi=oUl.getElementsByTagName(\'li\');
18 var oBg=aLi[aLi.length-1];
19 var iSpeed=0;
20
21 for(var i=0;i<aLi.length-1;i++){
22 aLi[i].onmouseover=function () {
23 startMove(oBg,this.offsetLeft);
24 }
25 }
26
27 function startMove(obj,iTarget) {
28 clearInterval(obj.timer);
29 obj.timer=setInterval(function () {
30 iSpeed+=(iTarget-obj.offsetLeft)/5; //5决定抖动幅度。
31 iSpeed*=0.7; //不断变化，直至为0。
32
33 obj.style.left=obj.offsetLeft+iSpeed+\'px\';
34 },30)
35
36 }
37 }
38 </script>
39 </head>
40 <body>
41 <ul id="ul1">
42 <li>首页</li>
43 <li>关于我们</li>
44 <li>产品</li>
45 <li>联系方式</li>
46 <li class="bg"></li>
47 </ul>
48 </body>
49 </html>
效果图：
以上是关于导航栏之抖动效果的主要内容，如果未能解决你的问题，请参考以下文章
Android仿小米商城底部导航栏之二（BottomNavigationBarViewPager和Fragment的联动使用）