首页 > 代码库 > 导航栏之抖动效果
导航栏之抖动效果
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>
效果图：
导航栏之抖动效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。